javascript - 在复选框状态切换元素类

Question

隐藏的类应该根据复选框是否被选中来切换。应隐藏其中一个下拉菜单并显示另一个。

也许我的三元运算符设置不正确。

提前致谢。

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>

这是我用来触发 toggleButton 函数的函数。

$('#toggler').on('click', function(){
   toggleButton();
});

Answer 1

您可以使用 var awardShow = awardOptions.toggleClass('hidden'); 而不是使用 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>