另一種編寫javascript的方式

另一種更簡潔的方式來編寫以下內容。基本上它基於一個條件切換2個按鈕的可見性。另一種編寫javascript的方式

$("#myCheckBox").click(function() { 
    if (window.console && window.console.log) 
     console.log("billing only checked? " + this.checked); 
    if (this.checked) { 
     $("#btnNext").hide(); 
     $("#btnFinish").show(); 
    } 
    else { 
     $("#btnNext").show(); 
     $("#btnFinish").hide(); 
    } 
});

只是尋找一個更有效的方式嗎？

來源

2011-10-21 Rod

你只會寫出更加細緻的寫法，通常意味着「難以閱讀」。保持原樣 - 沒關係。 –

按鈕是否隱藏起始？點擊複選框之前的事件？ –

爲了便於閱讀，您應該進行優化。你爲什麼認爲這不夠有效？ – ObscureRobot

您可以使用.toggle，它接受指示元素是否應顯示或隱藏的參數：

$("#btnNext").toggle(!this.checked); 
$("#btnFinish").toggle(this.checked);

如果能見度正確地從成立伊始，你甚至不必傳遞一個參數：

$("#btnNext, #btnFinish").toggle();

我同意與他人有關的可讀性，但。本身可能仍然可以理解，但.toggle(!this.checked)可能變得更難以理解。

來源

2011-10-21 17:36:08

這是一個很好的解決方案，因爲它可以在減少代碼的同時提高清晰度。 – ObscureRobot

它可能不是100％的效率 - 我敢肯定，你可以通過使用一個聰明的三元或凝結的東西這個（編輯：費利克斯·克林有一個很好的話） - 但在另一方面，它是完美的即使對於一個對項目不熟悉的人也是如此。

我的傾向是保持原樣。

來源

2011-10-21 17:36:19

使用切換（）函數 - http://api.jquery.com/toggle/

來源

2011-10-21 17:36:20

您可以使用.toggle()：

$("#myCheckBox").click(function() { 
    if (window.console && window.console.log) 
     console.log("billing only checked? " + this.checked); 
    $("#btnNext").toggle(!this.checked); 
    $("#btnFinish").toggle(this.checked); 
});

來源

2011-10-21 17:36:33 gilly3

您可以減少這樣的：

if (this.checked) { 
    $("#btnNext").hide(); 
    $("#btnFinish").show(); 
} 
else { 
    $("#btnNext").show(); 
    $("#btnFinish").hide(); 
}

這樣：

$("#btnNext").toggle(!this.checked); 
$("#btnFinish").toggle(this.checked);

來源

2011-10-21 17:36:35 Jon

假設它們以正確的show和hide狀態開始，則只需執行以下操作即可。

$("#myCheckBox").click(function() { 
    if (window.console && window.console.log) { 
    console.log("billing only checked? " + this.checked); 
    } 
    $("#btnNext").toggle(); 
    $("#btnFinish").toggle(); 
}

來源

2011-10-21 17:36:38 JaredPar

你可以使用.toggle()而不是show/hide，那麼你可以擺脫if/else結構。

來源

2011-10-21 17:37:16

另一種編寫javascript的方式

回答

相關問題