jQuery管理多个星级

Question

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

页面上有一个评级列表，一切正常，但有多个我通过选择要悬停的正确列表（this）遇到了一个小问题。现在它总是悬停在 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++;
            });
    });

希望我的问题有点清楚:)

提前致谢！ 尼克

Answer 1

您的代码工作正常（我刚刚从第一行删除了 this 关键字）：http://jsfiddle.net/yAwZz/

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

更新：

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

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

$('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

我更新了您的代码以仅使用 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++;
        });
});