为什么在循环中改变颜色后颜色不改变答案

【问题标题】：Why colour does not change after change colour in loop为什么在循环中改变颜色后颜色不改变
【发布时间】：2015-10-27 01:21:48
【问题描述】：

我有以下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 块时，我需要将所有带有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');
    });

如果我在点击带有class2 的div 之前点击带有class4 的div 代码可以正常工作，但是当我点击带有class2 的div 并尝试使用class4 在div 中点击更改颜色时，它不会工作。

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

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

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

【讨论】：

【解决方案2】：

问题是当您绑定$('.class4') 点击处理程序时，您动态添加.class4 类名的元素不存在。你需要使用event delegation，如下：

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

jsFiddle Demo

作为对上述内容的补充，还值得注意的是，使用addClass() 和removeClass() 显然比使用attr() 设置class 属性要快得多。

【讨论】：

【解决方案3】：

对 DOM 中动态创建的类使用 事件委托。否则 DOM 不知道是否找到了该类。在这些使用事件委托中，它再次从主体的根部遍历并查找是否找到该类以及

注意： 使用.addClass() 代替.attr() 来添加新类

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

【讨论】：

【解决方案4】：

我觉得这个可以用 $('.class3').removeClass("class3").addClass('class4');

【讨论】：