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
Post a Comment