jQuery代碼重複應該很簡單

Question

我不能完全弄清楚如何轉換這樣的：

$(function() { 
$(".cell_1 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#arkitek_reel'); 
    }); 
$(".cell_1 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_2 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ab_sciex'); 
    }); 
$(".cell_2 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_3 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#stratos_'); 
    }); 
$(".cell_3 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_4 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#riken_'); 
    }); 
$(".cell_4 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_5 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#scitable_'); 
    }); 
$(".cell_5 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_6 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ubc_asthma'); 
    }); 
$(".cell_6 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_7 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#xcelligence_'); 
    }); 
$(".cell_7 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_8 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#lbsc_geneware'); 
    }); 
$(".cell_8 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_9 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#nr_micro'); 
    }); 
$(".cell_9 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_10 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#genII_knee'); 
    }); 
$(".cell_10 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_11 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#exiqon_'); 
    }); 
$(".cell_11 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_12 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#hpi_'); 
    }); 
$(".cell_12 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_13 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#plexmark_'); 
    }); 
$(".cell_13 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_14 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#siscapa_'); 
    }); 
$(".cell_14 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_15 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#RNAi_'); 
    }); 
$(".cell_15 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_16 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#k2_'); 
    }); 
$(".cell_16 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_17 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#nucleonics_'); 
    }); 
$(".cell_17 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_18 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ca125_'); 
    }); 
$(".cell_18 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_19 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#cci_nursing'); 
    }); 
$(".cell_19 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_20 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#cadherins_'); 
    }); 
$(".cell_20 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_21 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ascent_'); 
    }); 
$(".cell_21 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

到這一點：

var urls = [ 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#cadherins_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ascent_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#stratos_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#riken_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#scitable_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ubc_asthma', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#xcelligence_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#lbsc_geneware', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#nr_micro', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#genII_knee', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#exiqon_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#hpi_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#plexmark_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#siscapa_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#RNAi_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#k2_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#nucleonics_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ca125_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#cci_nursing', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#cadherins_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ascent_', 
]; 
$(function() { 
    for(var i=0;i<urls.length;i++){ 
     var index = i+1; 
     $(".cell_"+index+" a").live('mouseover', function(){ 
      $('#gridInfo').fadeIn(100).load(urls[i]); 
     }); 
     $(".cell_"+index+" a").live('mouseout', function(){ 
      $('#gridInfo').stop(true,true).fadeOut(100); 
     }); 
    } 
}); 

Successfuly ...誰能發現我做錯了什麼？

Answer 1

您正在事件處理程序中使用變量i，但事件發生時該變量已用於循環數組，並具有超出數組中最後一項的值。

您需要一個閉包，您可以爲每個可以容納索引副本的迭代聲明一個變量，以便下一次迭代不會改變它。您可以使用anonumous功能，你的循環中創造倒閉，或者你可以使用jQuery.each方法循環，​​它使用一個回調函數數組，這樣你在討價還價關閉：

$(function() { 
    $.each(urls, function(i, url) { 
    var index = i+1; 
    $(".cell_"+index+" a").live('mouseover', function(){ 
     $('#gridInfo').fadeIn(100).load(url); 
    }).live('mouseout', function(){ 
     $('#gridInfo').stop(true,true).fadeOut(100); 
    }); 
    }); 
}); 

注意：應該檢查您是否可以使用delegate而不是live來減少事件處理的範圍。 live方法檢查文檔中發生的每個事件，而delegate方法可以應用於元素，並且只會檢查發生在它的子項中的事件。