如何在非同级元素中添加和删除活动类?(jQuery 遍历)

Question

我有 4 个按钮的代码，第一个按钮有类"活动"。我想删除类"active"，并在使用 jQuery 遍历单击时将其添加到其他按钮。

https://jsfiddle.net/f93v47dh/

<div class="row">
<div class="col-12">
<button type="button" class="btn active shadow-none" id="item-">item 1</button>
<button type="button" id="item-2" class="btn shadow-none">item 2</button>
</div>
<div class="col-12">
<button type="button" id="item-3" class="btn shadow-none">item 3</button>
<button type="button" id="item-4" class="btn shadow-none">item 4</button>
</div>
</div>

Answer 1

您可以使用 jQuery toggleClass api，然后从同级中删除活动类：

$(this).toggleClass('active').siblings().removeClass('active');

https://jsfiddle.net/g4rsfyzt/

非直系兄弟姐妹示例：

$('button').removeClass('active');
$(this).addClass('active');

https://jsfiddle.net/2v0edkqj/