javascript - Fill up previous stars on a JQuery 5-star rating onmouseover system -


i want implement 5 star rating system , fill stars left mouseover position yellow (class called yellow), otherwise grey.

i have done 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 fills 1 single star yellow. need select , fill previous single <i> elements somehow. how can achieve this?

please check fiddle. looking ?

$("#stars3 > i").hover(function() { $(this).prevall().addclass('yellow').removeclass('grey') $(this).addclass('yellow').removeclass('grey') $(this).nextall().addclass('grey').removeclass('yellow') }); 

Comments

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -