javascript - How to bind multiple ids on same event in jQuery? - Stack Overflow

admin管理员组

文章数量:1182790

Here is my HTML code:

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

Here is my JavaScript code:

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

My requirement is, I have multiple ids, but I want to bind id dynamically using jQuery. Whenever you mouseover on anchor tag that particular anchor tag will be fadeIn or fadeOut.

Any suggestion?

Here is my HTML code:

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

Here is my JavaScript code:

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

My requirement is, I have multiple ids, but I want to bind id dynamically using jQuery. Whenever you mouseover on anchor tag that particular anchor tag will be fadeIn or fadeOut.

Any suggestion?

• javascript
• jquery
• html
• asp.net

Share Improve this question Follow edited Jan 17, 2018 at 17:16 informatik01 16.4k1111 gold badges7878 silver badges108108 bronze badges asked Nov 21, 2013 at 10:23 BossBoss 47522 gold badges99 silver badges2424 bronze badges 2

• 2 Use a single class instead of several ids? – Frédéric Hamidi Commented Nov 21, 2013 at 10:29
• In my above code .if i mouseover on only one anchor it will show all fadein..how to resolve this problem... – Boss Commented Nov 21, 2013 at 10:50

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 21

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

easier of course if you just give your items a class instead of a separate ids, as they seem to do the same thing...

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

Do you mean something like this

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

and then bind the same functionality to all three anchors

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

although this code would be better written by giving all the anchor tags you wish to attach this functionality to a class like aFade and then selecting them using

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

You can pass multiple selector, separated by comma like

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

Try this :

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

Why not add a class to each HTML element and use the getElementByClass() function to select the elements that you want to use the fadeIn() and fadeOut() on.

You can do some thing like this if you have some common name for anchor tag id's

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

The above script states that if any anchor tag whose id starts with anchor, then the event will be wired up. You don't even have to specify all the id's of the anchor tag.

Its also better if you have some common .classname for your anchor tags. So that only that particular class names will wireup the events.

Here is the fiddle

Hope it helps

本文标签： javascriptHow to bind multiple ids on same event in jQueryStack Overflow