jQuery管理多个星级

Posted 2023-05-08

【中文标题】jQuery管理多个星级

【英文标题】：jQuery manage multiple star rating

【发布时间】：2013-02-04 01:11:13

【问题描述】：

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

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

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

提前致谢！ 尼克

【问题讨论】：

this 在$('ol.rating li', this) 中指的是什么？你也可以添加你的css定义吗？很难看到预期的行为。

它指的是用户触摸的ol.rating li（？）页面上有像上面这样的serval ol块。

【参考方案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/

【讨论】：

jsfiddle.net/yAwZz/1 当我添加一个额外的评级块时，你会看到发生了什么

@Freshcoat 在这个小提琴中，HTML 是无效的，因为 ID 在整个文档中重复。您需要确保“a”元素的唯一 ID

您对 id 的看法是正确的。我会将它们更改为类。我想@ryadavilli 的解决方案现在可以使用它了。

你在那里写的干净代码真是太棒了 :) 我同意你所说的悬停，鼠标输入是在这里用于评级星星的正确方法。谢谢，我会接受你的问题

【参考方案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> 

【参考方案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++;
        );
);