javascript - 通过jquery添加和删除类到自动生成的div？

Question

我有一组由 js 自动生成的 div。我需要通过 jquery 应用一些 CSS 规则，所以如果单击其中一个，另一个会被停用，然后再次单击另一个会重新激活。

我知道 CSS 属性，并且我已经为不同的模式准备了一些类，但是我需要知道如何为具有序列 ID 的自动生成的 div 执行此操作。

<div class="row">
 <div id="1_1" class="avilable"> box 01 </div>
 <div id="1_2" class="avilable"> box 01 </div>
 <div id="1_3" class="avilable"> box 01 </div>
 <div id="1_4" class="avilable"> box 01 </div>
</div>
<div class="row">
 <div id="2_1" class="avilable"> box 01 </div>
 <div id="2_2" class="avilable"> box 01 </div>
 <div id="2_3" class="avilable"> box 01 </div>
 <div id="2_4" class="avilable"> box 01 </div>
</div>
<div class="row">
 <div id="3_1" class="avilable"> box 01 </div>
 <div id="3_2" class="avilable"> box 01 </div>
 <div id="3_3" class="avilable"> box 01 </div>
 <div id="3_4" class="avilable"> box 01 </div>
</div>

标签： javascriptjqueryhtmlcss

Answer 1

你可以使用这个 - Jquery

$("body").on("click","div.avilable",function(){
    $("div.avilable").removeClass("active");
$(this).addClass("active");

})

这是 jsfiddle 链接：https ://jsfiddle.net/8upt4e2s/1/