0

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

页面上有一个评级列表，一切正常，但是通过选择要悬停的正确列表（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++;
            });
    });

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

提前致谢！缺口

4

3 回答 3

4

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

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

更新：

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

您可以使用.index()和.slice() jQuery 方法来简化代码并使其在不使用 id 的情况下按预期工作。请注意，我使用mouseenter事件而不是悬停广告悬停在 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/

于 2013-02-19T11:22:45.473 回答
0

尝试给不同的等级名称。前任：

<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>
于 2013-02-19T11:25:28.747 回答
0

我更新了您的代码以仅使用 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++;
        });
});
于 2013-02-19T11:46:05.437 回答