未选中时无法显示 div

Question

我正在尝试使用引导切换来创建在月度计划和年度计划之间进行切换的切换。我让开关在它移动并且看起来正确的意义上起作用，但我无法让 JS 部分工作。所以它现在只会显示monthly div，不会切换到年度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>

年度股利

<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 实际上只在页面加载时执行一次。因此，如果您一开始就在 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);

Answer 2

您需要了解 JavaScript 中的一个非常基本的概念，即在发生其他事情时做一些事情。用技术术语来说，绑定到一个事件。每次发生某些事件时，您都会绑定一些代码的执行（通常包含在一个函数中）：

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

• type 是事件本身（它的名称）
• listener 是要执行的函数的名称（您可以使用匿名函数而不是名称，但最好保持整洁，只需将代码放在命名函数中即可
• 选项是：
  • capture：一个布尔值，表示这种类型的事件将在被分派到 DOM 树中它下面的任何 EventTarget 之前被分派到已注册的侦听器。
  • once：一个布尔值，指示在添加后最多应调用一次侦听器。如果为 true，则在调用时会自动删除侦听器。
  • passive：一个布尔值，表示监听器永远不会调用 preventDefault()。如果是这样，用户代理应该忽略它并生成控制台警告。请参阅使用被动侦听器提高滚动性能以了解更多信息。
  • mozSystemGroup：一个布尔值，指示应将侦听器添加到系统组。仅适用于在 XBL 或 Firefox 的 chrome 中运行的代码。

选项是可选的

现在，回到你的例子：

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了解详情。

---

另外，由于您使用的是 Bootstrap，这意味着您也在使用 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 3

您需要为切换分配一个 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';
    }
}