关于javascript：当Button具有Class .active时，在Div上切换Class？

Toggle Class on Div when Button has Class .active?

我有一个复选框按钮，可以切换到.active ：

1
2
3
4
5
6

我希望该活动状态触发上的类切换

1
2
3
4
5
6
7
8
9

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

相关讨论

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

1
2
3

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

HTML标记将如下所示：

1
2
3
4
5
6
7
8
9

<label class="btn thisBtn">
<input type="checkbox" id="checkbox"> This
</label>
<label class="btn thatBtn">
<input type="checkbox"> That
</label>

On checkbox select

如果使用模板引擎显示表单，则可以将＃checkbox-show设置为在加载时具有display：block，只有在选中#checkbox时才可以。如果没有，只需执行一次简单的if语句即可在jQuery上显示/隐藏div仅一次，并准备好文档。