Assign jQuery handler to multiple DIV using variables

Question

I have a bunch of different DIVs in a menu that affect different things but they're all related by a "number". It works perfectly when I have them all separated but all the For and While loop attempts failed... The hover are applied during a "$(document).ready(function () {});"...

I'm just trying to clean up the code here and change this :

$("#slideMenu1").hover(function () {
  $("#slideMenu1Box").slideToggle("fast");
});

$("#slideMenu2").hover(function () {
  $("#slideMenu2Box").slideToggle("fast");
});

$("#slideMenu3").hover(function () {
  $("#slideMenu3Box").slideToggle("fast");
});

$("#slideMenu4").hover(function () {
  $("#slideMenu4Box").slideToggle("fast");
});

to something like :

for(var i = 1; i < 5; i++) {    
$("#slideMenu"+i).hover(function () {
  $("#slideMenu"+i+"Box").slideToggle("fast");
});
}

but I can't pull it off. Is it possible? Any idea?

Or you could use classes and dom hierarchy to do most of the work. — Kevin B, Jul 25 '12 at 20:07
Read up on JavaScript closures http://stackoverflow.com/questions/111102/how-do-javascript-closures-work — Musa, Jul 25 '12 at 20:09
@Kevin B : That's what I kind of ended up doing with the answer below. For some reason I didn't really consider that and went straight for IDs and massive confusion. Thank you for your input! Musa : Haven't heard about closures before. I'm gonna have to read that link... — Tommy Gagnon, Jul 25 '12 at 20:26

XhkUnlimit · Accepted Answer · 2014-09-25T22:21:38.697

3

The way i would do it is using class selector or another selector.

 $(".slideMenu").hover(function() {
   $(".slideMenuBox", this).slideToggle("fast")
 });

 .slideMenu{
   display:block;
   height:20px;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideMenu1" class="slideMenu">
  <div id="slideMenuBox1" class="slideMenuBox">
    Menu1
  </div>
</div>
<div id="slideMenu2" class="slideMenu">
  <div id="slideMenuBox2" class="slideMenuBox">
    Menu2
  </div>
</div>

edited Sep 25 '14 at 22:21

answered Jul 25 '12 at 20:08

XhkUnlimit

353
1
11

This works perfectly. So basically you're just telling him to the do the hover on the slideMenuBox that belongs to this slideMenu. Thanks a lot! – Tommy Gagnon Jul 25 '12 at 20:24

score 2 · Answer 2 · answered Jul 25 '12 at 20:07

2

I recommend you give all of your slidemenu's a class called "slidemenu" then reference them like this:

$(".slideMenu").hover(...);

answered Jul 25 '12 at 20:07

Chris

440
3
8

score 2 · Answer 3 · answered Jul 25 '12 at 20:08

It is possible, and I would suggest taking advantage of event delegation so you don't have loads of event handlers:

$("#someAncestor").on("mouseenter mouseleave", "[id^=slideMenu]", function () {
    $("#" + this.id + "Box").slideToggle("fast");
});

You could simplify that by using a common class name, and if you show your markup, there will be a way to get a reference to the appropriate ...Box element without finding it by ID.

Some references:

Also note the use of mouseenter and mouseleave. The .hover() method you're currently using is just shorthand for them, but you can't use it with .on(), hence the need to bind to both explicitly.

Thank you for your input. I'll check out these links. – Tommy Gagnon Jul 25 '12 at 20:23 — Tommy Gagnon, Jul 25 '12 at 20:23

score 0 · Answer 4 · answered Jul 25 '12 at 20:17

Can you add a common class to these elements?

It should really look something like this:

<html>
    <div class="slideMenu" option="1">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="2">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="3">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="4">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="5">
        <div class="slideMenuBox"></div>
    </div>
</html>

Then you can apply your event handler to all of them:

$(".slideMenu").hover( 
    function()
    {
        $(".slideMenuBox", this).slideToggle("fast");
    }
);

And you can still refer to them individually, if you need to:

$(".slideMenu[option='1']")

That's what I ended up doing based on nearly the exact same answer a little minutes before yours. Thanks a lot for your input! :) — Tommy Gagnon, Jul 25 '12 at 20:27

Assign jQuery handler to multiple DIV using variables

4 Answers4