在鼠标悬停系统的JQuery 5星级评级中填满以前的星星

Question

我要实施5星评级系统，并把鼠标悬停位置剩下的星星填充为黄色（类称为yellow ），否则填充为grey 。

到目前为止，我已经做到了：

HTML：

<div id="stars3">
<i data-count="0" class="glyphicon glyphicon-star grey-light grey"></i> 
<i data-count="1" class="glyphicon glyphicon-star grey-light grey"></i> 
<i data-count="2" class="glyphicon glyphicon-star grey-light grey"></i> 
<i data-count="3" class="glyphicon glyphicon-star grey-light grey"></i> 
<i data-count="4" class="glyphicon glyphicon-star grey-light grey"></i> 
</div>

JQuery的：

$("[id^=stars] > i").hover(function() {
    count = $(this).attr("data-count");
    $(this).each(function (i) {
        if ($(this).attr("data-count") < count)
        $(this).addClass("yellow");
    });
    console.log($(this));
});

但这仅将一颗星星填充为黄色。 我需要以某种方式选择并填充所有先前的单个<i>元素。 我该如何实现？

Answer 1

请检查小提琴 。 这是你要找的东西吗？

$("#stars3 > i").hover(function() {
$(this).prevAll().addClass('yellow').removeClass('grey')
$(this).addClass('yellow').removeClass('grey')
$(this).nextAll().addClass('grey').removeClass('yellow')
});

Answer 2

像这样：

 $("[id^=stars] > i").hover(function() { $(this).prevAll().addBack().toggleClass("yellow"); }); 

 .yellow { background-color:yellow } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="stars3"> <i data-count="0" class="glyphicon glyphicon-star grey-light grey">*</i> <i data-count="1" class="glyphicon glyphicon-star grey-light grey">*</i> <i data-count="2" class="glyphicon glyphicon-star grey-light grey">*</i> <i data-count="3" class="glyphicon glyphicon-star grey-light grey">*</i> <i data-count="4" class="glyphicon glyphicon-star grey-light grey">*</i> </div>