My. css для функции рейтинга имеет некоторые проблемы

Question

Я пытался сделать функцию рейтинга. Я использовал стилевые ссылки из https://gist.github.com/blairanderson/7f9d1c08345c6573e09edaa1f7316fa1 для рисования звезд.

моя часть обзора

<div class="rate">
        <input type="radio" id="star5" name="rating" value="5" <?php echo ($postData['average_rating'] >= 5)?'checked="checked"':''; ?>>
        <label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4" <?php echo ($postData['average_rating'] >= 4)?'checked="checked"':''; ?>>
        <label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3" <?php echo ($postData['average_rating'] >= 3)?'checked="checked"':''; ?>>
        <label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2" <?php echo ($postData['average_rating'] >= 2)?'checked="checked"':''; ?>>
        <label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1" <?php echo ($postData['average_rating'] >= 1)?'checked="checked"':''; ?>>
        <label for="star1"></label>
</div>

моя часть стиля

<style>
.rate {
    float:left;
}

.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rate:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.rate > input:checked ~ label {
    color: #f70;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: gold;
}

.rate > input:checked ~ label:hover,
.rate > label:hover ~ input:checked ~ label {
    color: gold;
}

.rate > label:active {
    position:relative;
    top:2px;
    left:2px;
}
</style>

Я проверил jquery, и это хорошо. Из инспектора я вижу, что , но показана только первая звезда . Я не знаю почему.

Более того, я должен поместить часть стиля в этот файл, чтобы он работал. Я уверен, что другие части стиля в мистике. css работает хорошо. Я тоже не знаю почему.

Answer 1

Когда я проверил ваш код, с вашими стилями проблем нет. Работает без кода php.

.rate {
    float:left;
}

.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rate:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.rate > input:checked ~ label {
    color: #f70;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: gold;
}

<div class="rate">
        <input type="radio" id="star5" name="rating" value="5" checked="checked">
        <label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4" checked="checked">
        <label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3" checked="checked">
        <label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2" checked="checked">
        <label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1" checked="">
        <label for="star1"></label>
</div>

Answer 2

Большая часть работы выполняется с использованием общего селектора брата ( ~ ), который

соответствует второму элементу, только если он следует за первым элементом (хотя и не обязательно сразу) и оба являются дочерними элементами одного и того же родительского элемента.

... и тот факт, что ТОЛЬКО ОДНА радиокнопка в группе может быть выбрана одновременно. Согласно вашему коду, вы пытаетесь пометить все переключатели на checked. И в таком случае преобладает только последняя checked кнопка. Вы можете увидеть это поведение, если закомментируете переключатель, скрывающий CSS, как показано ниже.

.rate {
  float: left;
}

/*.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
  clip: rect(0, 0, 0, 0);
}*/

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  padding: 0 .1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 200%;
  line-height: 1.2;
  color: #ddd;
}

.rate:not(:checked)>label:before {
  content: '★ ';
}

.rate>input:checked~label {
  color: #f70;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: gold;
}

<div class="rate">
  <input type="radio" id="star5" name="rating" value="5" checked="checked">
  <label for="star5"></label>
  <input type="radio" id="star4" name="rating" value="4" checked="checked">
  <label for="star4"></label>
  <input type="radio" id="star3" name="rating" value="3" checked="checked">
  <label for="star3"></label>
  <input type="radio" id="star2" name="rating" value="2" checked="checked">
  <label for="star2"></label>
  <input type="radio" id="star1" name="rating" value="1" checked="checked">
  <label for="star1"></label>
</div>

Решение состоит в том, чтобы убедиться, что вы помечаете только радиокнопку с самым высоким рейтингом для checked в вашем коде PHP, который в вашем случае является номер 5. Я полагаю, что решение было бы сделать ваше PHP условие == вместо >=.

Answer 3

Если вы хотите проверить все пять звезд, вам нужно поставить checked="checked" только для значения 5. Если вы установите 'checked="checked" для всех значений, вы получите только одну звезду. В основном, checked="checked" только для значения, которое вы хочу провериться.

Попробуйте изменить свой код следующим образом.

<div class="rate">
    <input type="radio" id="star5" name="rating" value="5" <?php echo ($postData['average_rating'] == 5)?'checked="checked"':''; ?>>
    <label for="star5"></label>
    <input type="radio" id="star4" name="rating" value="4" <?php echo ($postData['average_rating'] == 4)?'checked="checked"':''; ?>>
    <label for="star4"></label>
    <input type="radio" id="star3" name="rating" value="3" <?php echo ($postData['average_rating'] == 3)?'checked="checked"':''; ?>>
    <label for="star3"></label>
    <input type="radio" id="star2" name="rating" value="2" <?php echo ($postData['average_rating'] == 2)?'checked="checked"':''; ?>>
    <label for="star2"></label>
    <input type="radio" id="star1" name="rating" value="1" <?php echo ($postData['average_rating'] == 1)?'checked="checked"':''; ?>>
    <label for="star1"></label>
    </div>