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。每当您在锚标记上鼠标悬停时，特定锚标记将 fadeIn 或 fadeOut 。

有什么建议吗？

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
});

Answer 2

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

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

Answer 3

试试这个：

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

Answer 4

你的意思是这样吗

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

Answer 5

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

Answer 6

如果您有锚标记ID的常用名称

，则可以执行此类操作

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

上述脚本指出，如果任何其标识以anchor开头的锚标记，则该事件将被连线。您甚至不必指定锚标记的所有ID。

如果你的锚标签有一些共同的.classname，它也会更好。因此，只有那些特定的类名才能汇总事件。

以下是 fiddle

希望有所帮助

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

6 个答案: