Javascript CSS控件用于多个div'；结果不同

我正在努力实现这一点 进入我的web应用程序，从数据库获取数据并将其显示到表中。表中的一个值是包含评级系统的量程：

<span class="starRating">

我以编程方式为每个DB项创建范围：

            else if(dbArray[j].match('Rating')){
                var spanID = 'SPAN' + i;
                var ratingDiv = document.createElement(spanID);
                ratingDiv.setAttribute('class', 'starRating');
                var ratingContents = '<input id="rating5" type="radio" name="rating" value="5"><label for="rating5">5</label><input id="rating4" type="radio" name="rating" value="4"><label for="rating4">4</label><input id="rating3" type="radio" name="rating" value="3" checked><label for="rating3">3</label><input id="rating2" type="radio" name="rating" value="2"><label for="rating2">2</label><input id="rating1" type="radio" name="rating" value="1"><label for="rating1">1</label>';
                ratingDiv.innerHTML = ratingContents;
                cellName.appendChild(ratingDiv);
            }

else if（dbArray[j].匹配（'Rating'））{
变量spanID='SPAN'+i；
var ratingDiv=document.createElement（spanID）；
ratingDiv.setAttribute（'class'，'starting'）；
var评级内容='54321'；
ratingDiv.innerHTML=分级内容；
cellName.appendChild（ratingDiv）；
}

每个跨距都有一个唯一的id，但是它们都使用相同的css。问题是当星级评定被创建时，我只能保存一个等级。有没有一种方法可以让我的评级在每种情况下都是唯一的，而不必为每个DB项目创建单独的css？下面是一个粗略的问题示例：

---

如果我拿错了棍子的一端，我道歉

---

你不能根据评级创建一个类并将其添加到每个类中吗<代码>评级5{/*五星评级的样式*/}？假设评级性质相似，并解决有限数量的可能结果。

你有几个问题，但我认为你比你想象的更接近。首先，你有非唯一的ID，这是我认为主要的问题。ID应始终是唯一的。我制作了这个JSFIDLE，只需使用字母前缀重命名id，然后对您的代码进行一个非常小的修改就可以了

例如：

<div class="rating">
    <span><input type="radio" name="rating" id="astr5" value="5"><label for="str5"></label></span>
    <span><input type="radio" name="rating" id="astr4" value="4"><label for="str4"></label></span>
    <span><input type="radio" name="rating" id="astr3" value="3"><label for="str3"></label></span>
    <span><input type="radio" name="rating" id="astr2" value="2"><label for="str2"></label></span>
    <span><input type="radio" name="rating" id="astr1" value="1"><label for="str1"></label></span>
</div>

而且收视率也很高。另外，我没有点击输入，而是输入span，它变化不大，而且更精简

现在你必须弄清楚如何降低评级

编辑：

要降低评级：

添加到单击事件：

$(this).siblings().removeClass('checked');
$(this).parent().addClass('rated');

在css中：

.rating.rated:hover span:not(:hover) label {
    background:#CCC;
    color:#FFF;
}
.rating.rated:hover span:hover ~ span label,
.rating.rated:hover span:last-child label
{
    background:#F90;
    color:#FFF;
}

更新的JSFIDLE:

以下是我的解决方案：

html

<div class="rating">
 <span class="star" data-value="5">☆</span>
 <span class="star" data-value="4">☆</span>
 <span class="star selected" data-value="3">☆</span>
 <span class="star" data-value="2">☆</span>
 <span class="star" data-value="1">☆</span>
</div>

CSS

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}
.rating > .star {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 1.1em;
}
.rating > .star:hover,
.rating > .star:hover ~ .star,
.rating > .star.selected,
.rating > .star.selected ~ .star {
    color: transparent;
    2
}
.rating > .star:hover:before,
.rating > .star:hover ~ .star:before,
.rating > .star.selected:before,
.rating > .star.selected ~ .star:before {
    content:"\2605";
    position: absolute;
    left: 0;
    color: gold;
}

我正在使用这种模式，我认为它更干净（）

请注意，您可能需要添加一些内容，以便单击以选择0颗星

---

如上所述，您不能在DOM上使用同一id两次。

建议：用单引号将分级内容括起来，这将消除大量的\并促进您对建议@JohnDevelops的编码错误。我不知道在这种情况下我会怎么做，因为小部件没有针对每个评级的单独样式。当用户悬停在星星上时，它们会动态变化。谢谢@julien grégoire，让我试试看！这有点奏效，但正如你提到的，我不能取消选中。不过我给了你一票。

$(document).ready(function () {
    //  Check Radio-box
    $('.rating .star').click(function (evt) {
        var $target = $(evt.currentTarget);
        $target.parent().find('.star').removeClass('selected');
        $target.addClass('selected');
        var userRating = this.data('value');
        alert(userRating);
    });
});

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}
.rating > .star {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 1.1em;
}
.rating > .star:hover,
.rating > .star:hover ~ .star,
.rating > .star.selected,
.rating > .star.selected ~ .star {
    color: transparent;
    2
}
.rating > .star:hover:before,
.rating > .star:hover ~ .star:before,
.rating > .star.selected:before,
.rating > .star.selected ~ .star:before {
    content:"\2605";
    position: absolute;
    left: 0;
    color: gold;
}