javascript - 星级评定系统 : CSS works on only one instance

Question

我有一个星级评定系统。

HTML 部分通过 php 添加到 foreach 中，并出现在图像库中以添加评级系统。我以这段代码为例，在我通过 jQuery 设置的真实代码中使用 DB_result 工作正常，但只有 20 张图片中的一张显示了星星

我该如何解决？总共有 5000 张图片通过分页添加

PhP部分是这样的:

foreach ($xxx AS $X){
//cake php simply echo the file where the inputfields are in
echo $this->Element('../Candidates/Elements/rating_display')

}

// for the number 2 comes the php variable
$(".vote[value='2']").attr("checked", true);

.rating {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating: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;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

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

.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="rating">
    <legend>Please rate:</legend>
    <input type="radio" id="star5" name="rating" value="5" class="vote"/><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" class="vote" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" class="vote"/><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" class="vote"/><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" class="vote"/><label for="star1" title="Sucks big time">1 star</label>
</fieldset>
<fieldset class="rating">
    <legend>Please rate:</legend>
    <input type="radio" id="star5" name="rating" value="5" class="vote"/><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" class="vote" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" class="vote"/><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" class="vote"/><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" class="vote"/><label for="star1" title="Sucks big time">1 star</label>
</fieldset>

Answer 1

它只适用于一个实例，因为输入的 ID 重复。让它们独一无二 - 总是 :)