通過 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>

Answer 1

使用此 jquery 代碼：-

$("body").on("click","div.avilable",function(){
    $("div.avilable").removeClass("test-remove");
    $(this).addClass("test-add");
})

Answer 2

你可以使用這個 - Jquery

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

})

這是 jsfiddle 鏈接： https ://jsfiddle.net/8upt4e2s/1/

Answer 3

$("div.avilable").on("click",function(){
    $(this).toggleClass("active");
});