未选中时无法显示div
问题描述:
我正在尝试使用引导切换来创建切换,以便在每月和每年计划之间进行更改。我得到的切换功能,它移动和看起来不错,但我不能让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>
每月格
<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';
}
答
您需要了解在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);
答
你需要一个事件侦听分配给切换。这种方式分配的功能将被执行。此功能显示正确的块。
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';
}
}
答
你的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);