这是我的代码:
$('.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-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);
}
关于javascript - jQuery优化多次悬停代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7285981/