如何簡化這個jQuery JavaScript代碼？

我有點新的jQuery/JavaScript編碼。我已經設法編寫下面的代碼，但我認爲有一個更簡單的方法來寫它。有沒有人能告訴我如何？如何簡化這個jQuery JavaScript代碼？

$(document).ready(function(){ 
$(".btn_home").click(function(){ 
$("#article1").fadeIn(); 
$("#article2").fadeOut(); 
$("#article3").fadeOut(); 
$("#article4").fadeOut(); 

$("#blended").fadeOut(); 
$("#contact").fadeOut(); 
}); 

$(".btn_prt").click(function(){ 
$("#article1").fadeOut(); 
$("#article2").fadeIn(); 
$("#article3").fadeOut(); 
$("#article4").fadeOut(); 


$("#over").fadeIn(); 
$("#blended").fadeOut(); 
$("#contact").fadeOut(); 
}); 

$(".btn_blog").click(function(){ 
$("#article1").fadeOut(); 
$("#article2").fadeOut(); 
$("#article3").fadeIn(); 
$("#article4").fadeOut(); 

$("#over").fadeOut(); 
$("#blended").fadeIn(); 
$("#contact").fadeOut(); 
}); 

$(".btn_abt").click(function(){ 
$("#article1").fadeOut(); 
$("#article2").fadeOut(); 
$("#article3").fadeOut(); 
$("#article4").fadeIn(); 

$("#over").fadeOut(); 
$("#blended").fadeOut(); 
$("#contact").fadeIn(); 
}); 
});

來源

2012-11-08 Kun

在http://codereview.stackexchange.com/中發佈問題，不在這裏。 – Engineer

除了沒有發佈在正確的位置，您還需要顯示HTML並解釋應該實現的內容。 – Sparky

我不知道codereview有一個特殊的部分。不會再發生:) – Kun

這裏的問題是代碼重複。你需要使用帶參數的函數來幫助解決這個問題。

$(document).ready(function() { 
    $(".btn_prt").click(function(){ 
     fadeAllBut("#article2, #over"); 
    }); 

    $(".btn_blog").click(function(){ 
     fadeAllBut("#article3, #blended"); 
    }); 

    $(".btn_abt").click(function(){ 
     fadeAllBut("#article4, #contact"); 
    }); 
}); 

function fadeAllBut(itemsToFadeIn) { 
    $(".fades").fadeOut(); 
    $(itemsToFadeIn).stop().fadeIn(); 
}

當然，你需要給CSS fades類所有你想淡入或淡出的項目。

來源

2012-11-08 15:17:58 MarioDS

謝謝！這對我來說看起來很乾淨，而且它非常完美！ – Kun

@坤，很高興有人幫忙。 – MarioDS

您可以結合項目：

$("#foo, #bar, #baz").fadeIn();

，或者您可以使用類

$('.notneeded').fadeOut();

來源

2012-11-08 15:08:47 Ene

+1清潔.. :) – SuperSaiyan

雖然你是對的，只是給一個類的項目淡出不會幫助，因爲他們有時也需要淡入。將標籤組合起來稍微短一些，但實質上不會使他的代碼更加結構化。 – MarioDS

$(document) 
.ready(function() { 
$(".btn_home") 
    .click(function() { 
    $("#article1") 
     .fadeIn(), $("#article2") 
     .fadeOut(), $("#article3") 
     .fadeOut(), $("#article4") 
     .fadeOut(), $("#blended") 
     .fadeOut(), $("#contact") 
     .fadeOut() 
}), $(".btn_prt") 
    .click(function() { 
    $("#article1") 
     .fadeOut(), $("#article2") 
     .fadeIn(), $("#article3") 
     .fadeOut(), $("#article4") 
     .fadeOut(), $("#over") 
     .fadeIn(), $("#blended") 
     .fadeOut(), $("#contact") 
     .fadeOut() 
}), $(".btn_blog") 
    .click(function() { 
    $("#article1") 
     .fadeOut(), $("#article2") 
     .fadeOut(), $("#article3") 
     .fadeIn(), $("#article4") 
     .fadeOut(), $("#over") 
     .fadeOut(), $("#blended") 
     .fadeIn(), $("#contact") 
     .fadeOut() 
}), $(".btn_abt") 
    .click(function() { 
    $("#article1") 
     .fadeOut(), $("#article2") 
     .fadeOut(), $("#article3") 
     .fadeOut(), $("#article4") 
     .fadeIn(), $("#over") 
     .fadeOut(), $("#blended") 
     .fadeOut(), $("#contact") 
     .fadeIn() 
}) 
})

來源

2012-11-08 23:54:46

如何簡化這個jQuery JavaScript代碼？

回答

相關問題