How to use dynamic div ID

Question

I've been looking at so many answers here that are so close but because my jQuery knowledge is so patchy, I can't make them relevant. So I'll just go ahead and ask. I hope you all don't mind!

So, here's the script:

$("#button1").mouseenter(function(){
  $("#a1").fadeIn('100', function() { });

  $("#button1").mouseleave(function(){
      $("#a1").fadeOut('100', function() {}); 
  }); 
});

I have multiple buttons which, on mouseenter , I want to activate the corresponding arrow.

Rather than repeat the script for each pair - #button2 to #arrow2 etc - how can I just put in some neat variable in the $() bit and have it work? Sounds simple, I'm sure there's a way that my denseness cannot find.

This is the HTML (for those who requested it):

 <div id="buttons">
    <p><a href="#"><img src="images/1.png" name="button1" id="button1" /></a></p>
    <p><a href="#"><img src="images/2.png" name="button2" id="button2" /></a></p>
    <p><a href="#"><img src="images/3.png" name="button3" id="button3" /></a></p>
    <p><a href="#"><img src="images/4.png" name="button4" id="button4" /></a></p>
    <p><a href="#"><img src="images/5.png" name="button5" id="button5" /></a></p>
    </div>

<div class="arrow" id="a1"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a2"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a3"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a4"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a5"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a6"><img src="images/arrow.png" width="747" height="75" /></div>

Answer 1

Rather than using the ID, give the button a class.

HTML:

<button id="button1" class="hoverbutton" />
<button id="button2" class="hoverbutton" />

jQuery:

$(".hoverbutton").mouseenter(function () {
        $(".arrowclass").fadeIn('100', function () { });
    });

$(".hoverbutton").mouseleave(function () {
        $(".arrowclass").fadeOut('100', function () { });
    });

Answer 2

$(".buttonClass").mouseenter(function(){
  $(this).siblings('.aClass').fadeIn('100', function() { });

  $(".buttonClass").mouseleave(function(){
      $(this).siblings('.aClass').fadeOut('100', function() {}); 
  }); 
});

You can use this (or similar, instead of siblings use a proper selector) and add the mentioned classes (aClass and buttonClass) to your components).

An example where this works:

<div>
 <button class="buttonClass">Description</button>
 <a class="aClass">Description</a>
</div>

Note that it's important to "group" them inside a div tag, because otherwiese ALL <a> tags will fade in/out when you hover a button.

Answer 3

Your solution doesn't scale.

You are assigning eventhandlers for each element in the dom.

This is one of the beefs I have with jQuery. It makes it very easy to do these things wrong and shoot yourself in the foot along the way.

What you need is event delegation.

Essentially the concept is that you have an event handler much higher up in the dom tree that listens to events that bubble up. So you might be handling your mouse events on a list, not on the list items themselves, but on the document, in a single event handler.

Take a look at http://api.jquery.com/on/

Your code should be something like this:

$('body').on('mouseenter', '#buttons img', function (e) {
    $('#a' + $(this).attr('id').slice(-1)).fadeIn(300);
});

$('body').on('mouseleave', '#buttons img', function (e) {
    $('#a' + $(this).attr('id').slice(-1)).fadeOut(300);
});

Notice that I'm actually only using the id to get a link between the buttons and the arrows. You might consider skipping the id's all together and just go by what index the element has in its parent element.

Working example can be found here: http://jsfiddle.net/GNs44/1/

Answer 4

Something like this might get you started:

$("[id*=button]").mouseenter(function(){
    var t = $(this),
        idnum = t.slice(-1);

    $("[id=a" + idnum + "]").fadeIn('100', function() {
    }); 
}).mouseleave(function(){
    var t = $(this),
        idnum = t.slice(-1);

    $("[id=a" + idnum + "]").fadeOut('100', function() {
    }); 
});