Question

我有一个复选框按钮切换到.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" );
  }
});

Answer 1

您可以更改您的代码段以收听复选框更改，而不是删除/添加类以执行更少的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时，您才可以设置＃checkbox-show以显示：加载时阻止。如果没有，只需执行简单的if语句，在文档就绪时只用jQuery显示/隐藏div。

当Button具有Class .active时，在Div上切换Class？

1 个答案: