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

Question

I want to implement a 5 star rating system and fill up the stars left from the mouseover position yellow (class called yellow ), otherwise grey .

I have done this so far:

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));
});

But this only fills one single star to yellow. I need to select and fill all previous single <i> elements somehow. How can I achieve this?

Answer 1

Please check the Fiddle . Is this what were you looking for ?

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

Answer 2

Like this:

 $("[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>