更改位于悬停之前的列表项的样式

Question

$('i').on("mouseover", function () {
    var currentId = $(this).attr('id');
    $('i').each(function(i) {
        var prevId = currentId - 1;
        $('i#'+prevId).removeClass("fa-star-o");
        $('i#'+prevId).addClass("fa-star");
        currentId = prevId;
    });
    $(this).removeClass("fa-star-o");
    $(this).addClass("fa-star");
    return false;
});

http://jsfiddle.net/ua85L/1/

以上是在悬停的元素之前的所有元素的star-o和star类之间切换的代码。但是，如果另一个项目被徘徊，我无法让它恢复为star-o。请参阅演示以获得一个想法。有什么帮助吗？

Answer 1

尝试，

var i = $('i')

i.on("mouseover", function () {

    i.removeClass("fa-star").addClass('fa-star-o');
    i.filter(':lt(' + (i.index($(this)) + 1) + ')').toggleClass("fa-star-o fa-star");

});

DEMO