jQuery optimize code of multiple hover

Question

Here's my code:

$('.tab_map1 area').hover(function(){
    $('#nav1').find('a').stop().toggleClass('hover', 500);
        return false;
});
$('.tab_map2 area').hover(function(){
    $('#nav2').find('a').stop().toggleClass('hover', 500);
        return false;
});
$('.tab_map3 area').hover(function(){
    $('#nav3').find('a').stop().toggleClass('hover', 500);
        return false;
});
$('.tab_map4 area').hover(function(){
    $('#nav4').find('a').stop().toggleClass('hover', 500);
        return false;
});

... (there's 8 of them)

I'd like to not repeat the same code multiple times but optimize it somehow. Is there a chance to replace .tab_map1-8 and #nav1-8 with some index value?

I tried:

var n = 8;
$('li.tab_map area').eq(n).hover(function(){
    $('#nav').eq(n).find('a').stop().toggleClass('hover', 500);
        return false;
});

and:

$("#navibar ul").each(function(index) {
$('.tab_map:eq(' + index + ') area').hover(function(index){
    $('#nav:eq(' + index + ')').find('a').stop().toggleClass('hover', 500);
        return false;
});
});

Both doesn't work.

JaredPar · Accepted Answer · 2011-09-02 17:59:47Z

2

The easiest way to do this is to use a for loop over the range 1-8. Then build up the selector for each index. For example

for (var i = 1; i <= 8; i++) {
  var helper = function (sel, id) {
    $(sel).hover(function() {
      $(id).find('a').stop().toggleClass('hover', 500);
      return false;
    });
  };

  helper('.tab_map' + i + ' area', '#nav' + i);
}

edited Sep 2, 2011 at 17:59

answered Sep 2, 2011 at 15:50

JaredPar

760k152 gold badges1.3k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Annaccond Over a year ago

Unfortunately it doesn't seems to work. I guess it's because of map/area - they are harder to handle. Here is live example how it should work: jsfiddle.net/LsAEu

JaredPar Over a year ago

@Annaccond my bad. I felt right into the javascript loop capture problem. Here is a fiddle that works. I'll update my answer jsfiddle.net/LsAEu

Collectives™ on Stack Overflow

jQuery optimize code of multiple hover

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related