Javascript 使用计数器索引设置.hover（）和.mouseout（）事件

我正在尝试使用TwitterBootstrap3ijQuery制作一个简单的五星评级系统。现在，我试图通过编写以下不起作用的代码，使用计数器设置.hover（）和.mouseout（）事件：

var i;
for (i = 1; i <= 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");
    });
}

vari；
对于（i=1；i您需要向closure
i
变量添加匿名函数调用：

var i;
for (i = 1; i <= 5; i++) {
    ( function( 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");
        });
    })( i );
}

vari；
对于（i=1；i尝试类似的方法

$('[id^=overall_rating_]').hover(function(){
    $(this).toggleClass("glyphicon-star-empty glyphicon-star");
});



编辑以适应评论，处理所有以前的星星等

var starz = $('[id^=overall_rating_]').hover(function(){
    starz.filter(':lt('+$(this).index()+')')
         .add(this)
         .toggleClass("glyphicon-star-empty glyphicon-star");
});

从您对adeneo答案的评论来看，这正是您真正需要的（它可能会被优化一点）：

但是我有五颗星，当我悬停在第三颗星上时，第一颗星和第二颗星也应该是满星。@mpet-你的问题根本没有提到这些。如果这是问题的一个重要部分，那么你应该更新你的问题的更多细节。很好的属性选择-我不会想到我会这么做ubt要选择哪一个答案，adeneo或@Ian为这个问题取一个更好的名字是“在鼠标上突出显示当前和以前的星星”？您的问题被否决的原因是因为您没有充分解释：您的问题、您尝试了什么、您尝试时发生了什么、您希望发生什么、您为什么这样做等等。问题应该是具体和详细的。请看我是否可以删除该问题以获得提问特权？我不确定那就行了。我会编辑这个问题来改进它，然后继续问这个问题。这才是真正需要的。
$(".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");
});