jQuery管理多星级评级

Question

在我的网站上，我有一个页面，上面有一些结果，人们可以在那里进行评分。

页面上有一个评级列表，一切都很好，但有多个评级列表时，我遇到了一个小问题，选择了要悬停的正确列表。现在，它总是html代码中悬停的第一个列表（如果我把光标放在第二个评级列表上，第一个就是悬停）。

html:

<ol class="rating" data-rating="4">
<li class="Arad5fQEnoZlv9E59d"><a title="Super boring" class="rate starOn" id="1">1 star</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Boring" class="rate starOn" id="2">2 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Nice" class="rate starOn" id="3">3 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Cool" class="rate starOn" id="4">4 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Super cool!" class="rate star" id="5">5 stars</a></li>
<div class="response">Score 4 By 2  ratings</div>
</ol> 

我的javascript中不会做得很好的部分：

$('ol.rating li', this).hover(function(){
            var id      = $('a', this).attr('id');
            var counter = 1;
            var salt    = $(this).attr('class');
            console.log('ol.rating li.'+salt);
            $('ol.rating li.'+salt).each(function(i){
            if (id >= counter) {
                $('a#'+counter).addClass("starHover");
            } else {
                $('a#'+counter).removeClass("starHover");
            }
            counter++;
            });
    });

希望我的问题有点清楚：）

提前感谢！Nick

Answer 1

您的代码运行良好（我刚刚从第一行中删除了this关键字）：http://jsfiddle.net/yAwZz/

您正在将类打印到控制台，这对于所有<li>元素都是相同的。这会是混乱的根源吗？

更新：

您对多个HTML元素使用相同的id，这从来都不是一个好主意。id属性必须是唯一的元素标识符。

您可以使用.index（）和.slice（）jQuery方法来简化代码，并使其在不使用id的情况下按预期工作。请注意，我使用了mouseenter事件而不是hover，并且在mousecenter和mouseleave上都调用了hover，在这种情况下这是不必要的：

$('ol.rating li').mouseenter(function(){
    var $lis = $(this).siblings("li").andSelf();
    var id   = $(this).index();
    $lis.removeClass("starHover");
    $lis.slice(0, id + 1).addClass("starHover");
});

您可以看到jsfiddle上的代码：http://jsfiddle.net/yAwZz/5/

Answer 2

尝试给不同评级的类名。例如：

<ol class="rating1" data-rating="4">
<li class="Arad5fQEnoZlv9E59d"><a title="Super boring" class="rate starOn" id="1">1 star</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Boring" class="rate starOn" id="2">2 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Nice" class="rate starOn" id="3">3 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Cool" class="rate starOn" id="4">4 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Super cool!" class="rate star" id="5">5 stars</a></li>
<div class="response">Score 4 By 2  ratings</div>
</ol> 
<ol class="rating2" data-rating="4">
<li class="Arad5fQEnoZlv9E59d"><a title="Super boring" class="rate starOn" id="1">1 star</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Boring" class="rate starOn" id="2">2 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Nice" class="rate starOn" id="3">3 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Cool" class="rate starOn" id="4">4 stars</a></li>
<li class="Arad5fQEnoZlv9E59d"><a title="Super cool!" class="rate star" id="5">5 stars</a></li>
<div class="response">Score 4 By 2  ratings</div>
</ol> 

Answer 3

I更新了您的代码，只使用li，然后从悬停中找出上下文。检查这个小提琴：http://jsfiddle.net/yAwZz/2/

$('li').hover(function(){
        console.log("hover");
        var id      = $('a', this).attr('id');
        var counter = 1;
        var salt    = $(this).attr('class');
        // get the context here.
        var parent = $(this).parent();
        console.log('ol.rating li#'+id);
        // remove the class for all elements by default.
        $('a').removeClass("starHover");
        // use the context here for adding the class
        $('li.'+salt, parent).each(function(i){
        if (id >= counter) {
            $('a#'+counter, parent).addClass("starHover");
        } else {
            $('a#'+counter, parent).removeClass("starHover");
        }
        counter++;
        });
});