Question

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

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

jQuery管理多个星级评级

3 个答案: