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/

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

3 个答案: