使用 jquery each() 和 hover() 选择多个 id 并悬停答案

【问题标题】：Selecting multiple id's and hovering using jquery each() and hover()使用 jquery each() 和 hover() 选择多个 id 并悬停
【发布时间】：2013-04-26 19:16:33
【问题描述】：

请看一下这段代码。我选择了所有具有相同 id 的元素，但是，只有第一个元素改变颜色，当您将鼠标悬停在其他元素上时，它们的颜色保持不变。不确定我的做法是否正确。请提供建议。

一个生活演示在这里 -> http://jsfiddle.net/bwoodlt/2ReCe/

    $(document).ready(function(){
        $("#ade").live("hover", function(){
            $("#ade").each(function (){
            $(this).toggleClass('highlight');
           // alert("In here..")
        });

        });
    });

更新：

谢谢各位！我确实使用了类选择器，它在悬停时选择了所有元素！我真正想要的是让它在悬停时选择每个元素，然后当我继续下一个元素时，它应该改变颜色，而不是选择所有元素并在一个项目悬停时改变它们的颜色！

【问题讨论】：

ID 的必须是唯一的。
使用类而不是 ID。
"所有具有相同 id 的元素" => 这就是问题所在..
你的代码可以很简单：$(".ade").on("hover", function(){ $(this).toggleClass('highlight'); // alert("In here..") }); 不需要每个里面

标签： jquery html dom loops jquery-plugins

【解决方案1】：

您应该只在一个元素上使用 ID。 jQuery 只会选择给定 ID 的第一个元素。一个类用于多个。

【讨论】：

【解决方案2】：

illegal in HTML 具有多个具有给定 ID 的元素。 $('#ade') 使用 getElementById 并且只返回一个元素。

在这种情况下使用一个类。 $('.ade') 将返回所有具有 ade 类的元素。

【讨论】：

【解决方案3】：

ID 是唯一的，一个页面上应该只存在一个具有特定 ID 的元素，而 jQuery 在使用 ID 选择器时只会选择一个元素。如果您想将多个元素组合在一起并选择它们，我建议您创建一个类并使用该选择器。

$('.test')

【讨论】：

【解决方案4】：

如前所述，ID 必须是唯一的。此外，您的代码无论如何都没有意义。当您将鼠标悬停在任何 div 上时，您会遍历所有其他 div，并将突出显示的类应用于每个 div。您肯定只想将突出显示的类添加到悬停的 div 中吗？在这种情况下，删除 .each()。并且不要使用 .live()，它已被弃用。如果需要，请使用 .hover()，或者如果需要委托事件，请使用 .on()。

$(".ade").hover(function(){
    $(this).toggleClass('highlight');
});

jsFiddle：http://jsfiddle.net/2ReCe/2/

【讨论】：

完全是我的评论 :) 语法略有不同。
感谢克里斯蒂安！优秀！ :)
@MarkSchultheiss 除了悬停事件不适用于 .on()，您需要使用 mouseenter 和 mouseleave！ jsfiddle.net/2ReCe/3
@ChristianVarga 是的，伪事件在 1.9 中已删除，因此您应该按照您的指示使用 enter/leave - 它在 1.9 发行说明中。