javascript - Using counter index to set .hover() and .mouseout() events -
i'm trying make simple 5 star rating system using twitter bootstrap 3 jquery. now, i'm trying set .hover() , .mouseout() events using counter writing code doesn't work:
var i; (i = 1; <= 5; i++) { $('#overall_rating_' + i).hover(function(){ $('#overall_rating_' + i).removeclass("glyphicon-star-empty").addclass("glyphicon-star"); }); $('#overall_rating_' + i).mouseout(function(){ $('#overall_rating_' + i).removeclass("glyphicon-star").addclass("glyphicon-star-empty"); }); }
trying highlight current , previous stars on mouseover. code not complete, accompanied additional sub-counters, part doesn't work now. better methods welcome. what's broken here?
from comment left on adeneo's answer, need (it optimized bit):
$(".stars").hover(function() { $(this).removeclass("glyphicon-star-empty") $(this).addclass("glyphicon-star"); $(this).prevall().removeclass("glyphicon-star-empty") $(this).prevall().addclass("glyphicon-star"); }, function() { $(".stars").removeclass("glyphicon-star") $(".stars").addclass("glyphicon-star-empty"); });
Comments
Post a Comment