JavaScriptを書くもう1つの方法

Question

次のように書くもう少し簡潔な方法です。基本的には、条件に基づいて2ボタンの表示を切り替えます。

$("#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(); 
    } 
}); 

おそらくもっと効率的な方法を探していますか？

Answer 1

あなたは要素が表示または非表示する必要があるかどうかを示す引数を受け入れる、.toggleを使用することができます。

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

視界が正しく最初から設定されている場合は、あなたも合格する必要はありません引数：

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

---

でも、私は読みやすさに関する他の人と同意します。 .toggleそれ自体はまだ理解できるかもしれませんが、.toggle(!this.checked)は理解するのがより難しくなる可能性があります。

Answer 2

それは100％効率的ではないかもしれない - 私はあなたが巧妙な三元または何か（編集：フェリックスクリングはすでに素晴らしいものを持っている）を使用することによって、これを凝縮することができると確信してい - 一方が、を、それが完全ですプロジェクトに慣れていない人でも、このように読めるようになりました。

私の傾向は、それをそのまま残すことです。

Answer 3

トグル（）関数を使用し - http://api.jquery.com/toggle/

Answer 4

を使用でき.toggle()を：これに

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

：

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

Answer 5

あなたはこれを減らすことができます彼らは正しいshowとhide州で始まると仮定すると、次のことができます。

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

Answer 6

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

Answer 7

show/hideの代わりに.toggle()を使用すると、if/else構造を取り除くことができます。