如何在 jQuery 中为同一事件绑定多个 id？答案

【问题标题】：How to bind multiple ids on same event in jQuery?如何在 jQuery 中为同一事件绑定多个 id？
【发布时间】：2013-12-05 18:19:45
【问题描述】：

这是我的 HTML 代码：

<a style='cursor:pointer'   id='anchor1' onmouseover=fnover(this)>
<a style='cursor:pointer'   id='anchor2' onmouseover=fnover(this)>
<a style='cursor:pointer'   id='anchor3'  onmouseover=fnover(this)>

这是我的 JavaScript 代码：

fnover(obj){
     $('.dropdown').fadeIn();
}

我的要求是，我有多个 id，但我想使用 jQuery 动态绑定 id。每当您将鼠标悬停在锚标记上时，该特定锚标记将是 fadeIn 或 fadeOut。

有什么建议吗？

【问题讨论】：

使用单个类而不是多个 id？
在我上面的代码中。如果我只将鼠标悬停在一个锚点上，它将显示所有淡入淡出..如何解决这个问题...

标签： javascript jquery html asp.net

【解决方案1】：

如果你有一些锚标签 id 的通用名称，你可以做这样的事情

$(function(){
    $("a[id*=anchor]").mouseover(function(){
       //do your stuff here 
    });
});

上面的脚本声明，如果有任何 id 以anchor 开头的锚标记，那么事件将被连接起来。您甚至不必指定锚标记的所有 id。

如果你的锚标签有一些常见的.classname 也会更好。这样只有特定的类名才能连接事件。

这里是fiddle

希望对你有帮助

【讨论】：

【解决方案2】：

你的意思是这样的

<a style='cursor:pointer' id='anchor1' />
<a style='cursor:pointer' id='anchor2' />
<a style='cursor:pointer' id='anchor3' />

然后将相同的功能绑定到所有三个锚点

$('#anchor1, #anchor2, #anchor3').hover(function(){ //Select all three
    $('.dropdown').fadeIn();                        //On mouse over
}, function(){
    $('.dropdown').fadeOut();                       //on mouse out
});

虽然这段代码会更好地编写，将您希望将此功能附加到 aFade 之类的所有锚标记，然后使用选择它们

$('.aFade').hover(function.........

【讨论】：

【解决方案3】：

试试这个：

 onmouseover=fnover($(this).attr("id"))

【讨论】：

【解决方案4】：

你可以传递多个选择器，用逗号分隔

$( "#anchor1, #anchor2, #anchor3" ).mouseover(function() {
  $('.dropdown').fadeIn();
});

【讨论】：

【解决方案5】：

为什么不给每个 HTML 元素添加一个类，并使用 getElementByClass() 函数来选择要使用fadeIn() 和fadeOut() 的元素。

【讨论】：

【解决方案6】：

$('#id1,#id2,#id3').on('mouseenter',function(){
   //do stuff on mouse over
});
$('#id1,#id2,#id3').on('mouseleave',function(){
   //do stuff on mouse out
});

如果你只是给你的物品一个类而不是一个单独的 id，当然更容易，因为它们似乎做同样的事情......

$('.myclass').on('mouseleave',function(){
   //do stuff on mouse out
});

【讨论】：

但是OP想要动态绑定ID。