[英]Toggle element class on checkbox state
The class hidden should be toggling based on if the checkbox is checked. 隐藏的类应该基于是否选中复选框来切换。 One of the drop-down menus should be hidden and the other be displayed. 其中一个下拉菜单应该隐藏,另一个显示。
maybe my ternary operator isn't set up properly. 也许我的三元运算符设置不正确。
Thanks in advance. 提前致谢。
function toggleButton() { var toggler = $("input[name='toggler']").prop('checked'); var awardOptions = $('#awardOptions'); var yearOptions = $('#yearOptions'); var awardShow = awardOptions.removeClass('hidden'); var yearShow = yearOptions.removeClass('hidden'); var awardHide = awardOptions.addClass('hidden'); var yearHide = yearOptions.addClass('hidden'); console.log(toggler); return (toggler) ? (awardShow,yearHide) : (awardHide, yearShow); } $('#toggler').on('click', function(){ toggleButton(); });
.hidden { display: none !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggleWrapper"> <input type="checkbox" class="dn" name="toggler" id="toggler" checked/> <label for="toggler" class="toggle"> <span class="toggle__handler"></span> </label> </div> <div class="inputBox" id="filter"> <div class="dropdown hidden" id="yearOptions"> <select id="hof-year"> <option value="0">Choose a Year</option> <option value="2016">2016</option> </select> </div> <div class="dropdown" id="awardOptions"> <select id="hof-accomp"> <option value="0">Choose an Award</option> </select> </div> </div>
This is the function I'm using to trigger the toggleButton function. 这是我用来触发toggleButton函数的函数。
$('#toggler').on('click', function(){
toggleButton();
});
You can use var awardShow = awardOptions.toggleClass('hidden');
你可以使用var awardShow = awardOptions.toggleClass('hidden');
instead of using addClass
or removeClass
. 而不是使用addClass
或removeClass
。
$('#toggler').on('click', function(){ $('#awardOptions, #yearOptions').toggleClass('hidden'); });
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggleWrapper"> <input type="checkbox" class="dn" name="toggler" id="toggler" checked/> <label for="toggler" class="toggle"> <span class="toggle__handler"></span> </label> </div> <div class="inputBox" id="filter"> <div class="dropdown hidden" id="yearOptions"> <select id="hof-year"> <option value="0">Choose a Year</option> <option value="2016">2016</option> </select> </div> <div class="dropdown" id="awardOptions"> <select id="hof-accomp"> <option value="0">Choose an Award</option> </select> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.