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

请检查Fiddle。这就是你在找什么？

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

Answer 2

像这样：

＆＃13;

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

＆＃13;

.yellow { background-color:yellow }

＆＃13;

<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>

＆＃13;

在jQuery 5星评级onmouseover系统上填补以前的明星

2 个答案: