当按钮激活Class.时，在Div上切换Class

Toggle Class on Div when Button has Class .active?

本文关键字：Class Div 按钮 激活      更新时间：2023-09-26

我有一个复选框按钮，可以切换到.active <div class="btn thisBtn active">:

<div class="btn-group" data-toggle="buttons">
  <label class="btn thisBtn">
    <input type="checkbox"> This
  </label>
  <label class="btn thatBtn">
    <input type="checkbox"> That
  </label>
</div>

我希望活动状态触发<div class="thisDiv hidden"> 上的类切换

$( function() {
  if ( $( ".thisBtn" ).is( ".active" ) ) {
      $( ".thisDiv" ).removeClass( "hidden" );
      $( ".thisDiv" ).addClass( "show" );
  } else {
      $( ".thisDiv" ).removeClass( "show" );
      $( ".thisDiv" ).addClass( "hidden" );
  }
});

您可以更改您的代码段以侦听复选框更改，而不是删除/添加类以执行较少的jQuery操作。

 $("#checkbox").change(function() {
       $("#checkbox-show").toggle(); 
    });

HTML标记应该是这样的：

<div class="btn-group" data-toggle="buttons">
  <label class="btn thisBtn">
    <input type="checkbox" id="checkbox"> This
  </label>
  <label class="btn thatBtn">
    <input type="checkbox"> That
  </label>
</div>
<div id="checkbox-show" style="display:none;">On checkbox select</div>

如果使用模板引擎显示表单，则可以将#checkbox show设置为加载display:block，仅当选中#checkbox时。如果没有，只需在文档就绪时执行简单的If语句，使用jQuery只显示/隐藏div一次。

相关文章：