Füllen Sie vorherige Sterne auf einem JQuery 5-Sterne-Rating onmouseover System

Question

Ich möchte ein 5-Sterne-Bewertungssystem implementieren und füllen Sie die Sterne links von der Mouseover-Position gelb (Klasse yellow), sonst grey.

ich dies bisher getan haben:

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

Aber das füllt nur ein einziger Stern zu gelb. Ich muss alle vorherigen einzelnen <i> Elemente irgendwie auswählen und füllen. Wie kann ich das erreichen?

Answer 1

Bitte überprüfen Sie die Fiddle. Ist das wonach Sie gesucht haben?

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

Answer 2

So:

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