如何讓這個重複的jQuery不那麼如此？

Question

我的jQuery的4塊看起來像這樣：

$('#aSplashBtn1').click(function(){ 
    $('#divSliderContent div').hide(); 
    $('#divSplash1').fadeIn('slow'); 
    return false; 
}); 
$('#aSplashBtn2').click(function(){ 
    $('#divSliderContent div').hide(); 
    $('#divSplash2').fadeIn('slow'); 
    return false; 
}); 
$('#aSplashBtn3').click(function(){ 
    $('#divSliderContent div').hide(); 
    $('#divSplash3').fadeIn('slow'); 
    return false; 
}); 
$('#aSplashBtn4').click(function(){ 
    $('#divSliderContent div').hide(); 
    $('#divSplash4').fadeIn('slow'); 
    return false; 
}); 

我試着學習更多關於JavaScript數組和循環，但是當我嘗試落實到這個代碼只結束了對若干工作1塊。有人能告訴我他們將如何完成優化？

Answer 1

的變化上Sosh's answer

$('#aSplashBtn1').click(hideAndFadeIn('#divSplash1')); 
$('#aSplashBtn2').click(hideAndFadeIn('#divSplash2')); 
$('#aSplashBtn3').click(hideAndFadeIn('#divSplash3')); 


function hideAndFadeIn(splash){ 
    return function() { 
     $('#divSliderContent div').hide(); 
     $(splash).fadeIn('slow'); 
     return false; 
    }; 
} 

Answer 2

var $divSlider = $("#divSliderContent div"); 
$('*[id^=aSplashBtn]').live('click', function(e){ 
    // Get the number from the id of the clicked element 
    var id = this.id.match(/^aSplashBtn(\d+)$/)[1]; 

    $divSlider.hide(); 

    $("#divSplash" + id).fadeIn('slow'); 

    // Preferred as opposed to return false 
    e.preventDefault(); 
}); 

這將設置一個單一的處理程序，將每一個元件都具有id與aSplashBtn開始相匹配。您的身份證號碼可能會達到您想要的數量（即#aSpashBtn100），並且它仍然會與正確的div#divSplash100配對。

另外，我在自己的變量中緩存了#divSliderContent div，因爲您不希望jQuery在每次點擊時再次查找它。

Answer 3

如果點擊的內容是兄弟姐妹，你可以這樣做：

$('#aSplashBtn1').siblings().andSelf().click(function(e){ 
    $('#divSliderContent div').hide(); 
    $('#divSplash'+e.target.id.substr(e.target.id.length-1)).fadeIn('slow'); 
    e.preventDefault(); 
});