如何在jQuery中绑定多个id到同一事件？

Question

这是我的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。每当您在锚点上悬停时，该特定的锚点将淡入或淡出。

有任何建议吗？

- Boss

---

使用一个类而不是多个ID？ - Frédéric Hamidi

在我的上面的代码中，如果我只将鼠标悬停在一个锚点上，它会显示所有淡入效果。如何解决这个问题？ - Boss

Answer 1

$('#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
});

- rita

---

但是楼主想要动态绑定ID。 - Ishan Jain

Answer 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.........

- Mark Walters

Answer 3

您可以使用逗号分隔多个选择器，例如：

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

- Satpal

Answer 4

尝试这个：

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

- Ishan Jain

Answer 5

如果您有一些锚点标签的通用名称，您可以像这样做一些事情。

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

以上脚本说明，如果任何id以anchor开头的锚点标签，则事件将被连接。您甚至不必指定所有锚点标签的id。

如果您的锚点标签有一些常见的.classname，那么最好只有这些特定的类名会连接事件。

这里是fiddle 希望能帮到您。

- Karthik Chintala

Answer 6

为什么不给每个HTML元素添加一个类，并使用getElementByClass()函数来选择您想要在其上使用fadeIn()和fadeOut()的元素呢？

- J2D8T