JQuery оптимизировать код множественного наведения - PullRequest
Новая
       8

JQuery оптимизировать код множественного наведения

2 голосов
/ 02 сентября 2011

Вот мой код: 

$('.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)

Я бы не хотел повторять один и тот же код несколько раз, а как-то оптимизировать его. Есть ли шанс заменить .tab_map1-8 и # nav1-8 на некоторое значение индекса?

Я пытался: 

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

и 

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

Оба не работают.

1 Ответ

2 голосов
/ 02 сентября 2011

Самый простой способ сделать это - использовать цикл for в диапазоне 1-8.Затем создайте селектор для каждого индекса.Например 

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