未選中時無法顯示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> 

每月格

<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> 

年度股利

<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]); 

• 型是事件本身（它的名字）
• 聽者是名要執行的功能（你可以有匿名函數，而不是一個名字，但它是更好地保持其整潔，只是把你的代碼命名函數內
• 選項是：
  • capture：一個布爾值，指示此類型的事件在分派到DOM樹下的任何EventTarget之前將分派給註冊的偵聽器。
  • 一次：一個布爾值，指示在添加後應該最多調用偵聽器一次。如果爲true，則在調用時將自動刪除偵聽器。
  • passive：一個布爾值，指示偵聽器永遠不會調用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。

---

另外，由於您使用的引導，這意味着你也使用jQuery，這使得一個更簡潔的語法：實際上只被在頁面加載執行一次

// 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

你需要一個事件偵聽分配給切換。這種方式分配的功能將被執行。此功能顯示正確的塊。

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 。因此，如果您在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'; 
    } 
}); 

現在每次有人點擊複選框，複選框的價值進行評估（選中與否），將應用程序影響的風格。

您也可以抽象一些細節，並創建一個處理檢查的命名函數，您可以簡單地在點擊事件時調用命名函數而不是匿名函數。

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);