未チェック時に表示するdivを取得できません

Question

ブートストラップトグルを使用して月次プランと年次プランを切り替えるスイッチを作成しようとしています。私はそれが動いて見えるという意味で機能するためにトグルを持っていますが、私はJS部品を動作させることができません。したがって今すぐmonthly divと表示され、年間部門には切り替わりません。現在、これは私が持っているものである

トグル

<div class="container"> 
    <div class="row"> 
    <div class="col-md-5"></div> 
    <div class="col-md-4 selectCenter"> 
     <br> 
     <input type="checkbox" checked id="toggle" data-toggle="toggle" data-on="Monthly" data-off="Annual" data-style="ios" data-onstyle="primary" data-offstyle="primary"> 
    </div> 
    </div> 

月間のdiv

<section class="se-section" id="monthly"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-4 col-sm-6"> 
     <h1>Monthly</h1> 
     </div> <!-- end col-md-4 --> 
     </div> <!-- end row --> 
    </div> <!-- end container --> 
    </section> 

年間のdiv

<section class="se-section" id="annual"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-4 col-sm-6"> 
     <h1>Annual</h1> 
     </div> <!-- end col-md-4 --> 
     </div> <!-- end row --> 
    </div> <!-- end container --> 
    </section> 

その後、私はJavaScript

var toggle = document.getElementById("toggle"); 
var monthly = document.getElementById("monthly"); 
var annual = document.getElementById("annual"); 

if(toggle.checked){ 
    monthly.style.display = 'block'; 
    annual.style.display = 'none'; 
} 
if(!toggle.checked){ 
    monthly.style.display = 'none'; 
    annual.style.display = 'block'; 
} 

Answer 1

JavaScriptの非常に基本的な概念を理解する必要があります。これは何か他のことが起こったときに何かをしています。専門用語では、イベントへのバインディング。

target.addEventListener(type, listener[, options]); 

• タイプは、イベント自体（その名前が）
• リスナーはの名前です：あなたは（通常の機能に包ま）いくつかのコードの実行、いくつかのイベントが発生するたびにバインドします実行される機能は、（あなたは、名前の代わりに無名関数を持つことができますが、それはきちんとそれを維持する方が良いでしょうし、ちょうど名前の関数内のコードを入れ
• オプションは次のとおりです。
  • キャプチャ：このタイプのイベントが登録されたリスナーにディスパッチされてからDOMツリーの下のEventTargetにディスパッチされることを示すブール値。
  • once：リスナーが追加された後に最大で1回呼び出される必要があることを示すブール値。 trueの場合、リスナーは呼び出されると自動的に削除されます。
  • 受動：リスナーがpreventDefault（）を決して呼び出さないことを示すブール値。そうであれば、ユーザエージェントはそれを無視してコンソール警告を生成する必要があります。詳細については、パッシブリスナーを使用したスクロールパフォーマンスの向上を参照してください。
  • mozSystemGroup：リスナーをシステムグループに追加する必要があることを示すブール値。 XBLまたはFirefoxのクロムで動作するコードでのみ利用可能です。

オプションが戻ってあなたの例に、今、オプションの

です：それについてです

var toggle = document.getElementById("toggle"), 
    monthly = document.getElementById("monthly"), 
    annual = document.getElementById("annual"); 

// define functionality: 
function toggleDivs() { 
    monthly.style.display = toggle.checked ? 'block' : 'none'; 
    annual.style.display = toggle.checked? 'none' : 'block'; 
} 

// bind to `change` on toggle: 
toggle.addEventListener('change', toggleDivs, {passive:true}); 

// bind to `window.onload` (so it runs once when the page is loaded): 
window.onload = toggleDivs; 

。 window.onloadでこのような関数をバインドするのは、ベストプラクティスではありません（別のバインドをオーバーライドすることも、後続の同様の関数でオーバーライドすることもできます）。詳細はthisをご覧ください。

// define the function: 
function toggleDivs() { 
    $('#monthly').css('display', $('#toggle').prop('checked') ? 
    'block':'none'); 
    $('#weekly').css('display', $('#toggle').prop('checked') ? 
    'none':'block');  
} 
// bind to `change` on `#toggle` : 
$('#toggle').on('change', toggleDivs); 

// bind to `load` on `window` : 
$(window).on('load', toggleDivs); 

Answer 2

あなたはトグルにするEventListenerを割り当てる必要があります。その方法で割り当てられた関数が実行されます。この関数は正しいブロックを表示します。

toggle.addEventListener('change', togglePlanViews); 

function togglePlanViews() { 
    if(toggle.checked){ 
     monthly.style.display = 'block'; 
     annual.style.display = 'none'; 
    } else { 
     monthly.style.display = 'none'; 
     annual.style.display = 'block'; 
    } 
} 

Answer 3

使いのブラウザではJavaScriptが実際には、ページの読み込みに一度実行されている：あなたがブートストラップを使用しているので、

---

また、それはあなたにも、より簡潔な構文を可能にjQueryを使っている意味します。だから、あなたがそれらのうちの1つをHTMLで「チェックされた」ものとして割り当てていれば、これはうまくいくでしょう。ただし、これらのチェックボックスがチェックされているかどうかを確認することはありません。

イベントハンドラを要素にバインドすると、この値を再度確認することができます。最も一般的には、「更新」ボタンなどのボタンが使用されますが、チェックボックスを使用しているため、チェックボックスのクリックイベントに結びつけるだけで、チェックされているかどうかがすぐに評価されます。

ボタンのクリックなどのイベントにそのビットのコードを関連付ける必要があります。すなわち、このようなとして行うことができます。毎回、誰かがそのチェックボックスをクリックする

var toggle = document.getElementById("toggle"); 
var monthly = document.getElementById("monthly"); 
var annual = document.getElementById("annual"); 

toggle.addEventListener('click', function(){ //bind an anonymous function to a button click for the element referenced by 'toggle' 
    if(toggle.checked){ 
     monthly.style.display = 'block'; 
     annual.style.display = 'none'; 
    } 
    if(!toggle.checked){ 
     monthly.style.display = 'none'; 
     annual.style.display = 'block'; 
    } 
}); 

は今、チェックボックスの値が評価されます（チェックまたはしない）とスタイルに進行エフェクトを適用します。

また、詳細を抽象化し、チェックを処理する名前付き関数を作成し、clickイベントで無名関数の代わりに名前付き関数を呼び出すこともできます。

function checkTimeframe(){ 
    if(toggle.checked){ 
     monthly.style.display = 'block'; 
     annual.style.display = 'none'; 
    } 
    if(!toggle.checked){ 
     monthly.style.display = 'none'; 
     annual.style.display = 'block'; 
    } 
} 
var toggle = document.getElementById("toggle"); 
var monthly = document.getElementById("monthly"); 
var annual = document.getElementById("annual"); 

toggle.addEventListener('click', checkTimeframe);