多個懸停

Question

的jQuery的優化代碼，這裏是我的代碼：

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

兩個不起作用。

Answer 1

最簡單的方法是在1-8範圍內使用for循環。然後爲每個索引建立選擇器。例如

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