jquery - 为什么在循环中改变颜色后颜色没有改变

Question

我有以下 html 代码:

<div class="clm class2"></div>
<div class="clm class3"></div>
<div class="clm class4"></div>
<div class="clm class3"></div>
<div class="clm class4"></div>

我有以下 CSS 代码:

.clm{
    width:50px;
    height:50px;
    margin-bottom: 10px;
    border-color: black;
}

.class1{
    background: red;
}

.class2{
    background: green;
}

.class3{
    background: blue;
}

.class4{
    background: black;
}

当我点击类 class2 的 div block 时，我需要用 class3 更改所有 div至 class4

例如:

之前:<div class="clm class3"></div>

点击后:<div class="clm class4"></div>

我有以下 js 代码 (jQuery):

$(".class2").click(function(){
        $(".class3").each(function() {
            $(this).attr('class','clm class4');
        });
    });

这段代码工作正常。颜色改变了。我有以下其他 js 脚本 (jQuery):

$(".class4").click(function(){
        $(this).attr('class','clm class1');
    });

如果我点击了 class4 的 div在点击带有 class2 的 div 之前代码工作正常，但是当我用 class2 单击 div 时我尝试使用 class4 更改 div 中的颜色点击这是行不通的。

附言html 代码更改正确，我看到了正确的颜色。

Answer 1

您需要对所有动态添加/删除的类名使用事件委托(delegate)。

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$("body").on('click','.class4',function(){
    $(this).attr('class','clm class1');
});