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块时，我需要将所有div更改为class3至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');
    });

如果我点击div与class4之前点击div class2代码正常，但当我点击div与class2并尝试更改颜色点击div时class4它不起作用。

P.S。 html代码改变正确，我看到正确的颜色。

Answer 1

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

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

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

Answer 2

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

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

jsFiddle Demo

作为上述的后脚本，还值得注意的是，使用addClass()和removeClass()显然要比使用{{1}设置class属性快得多}}

Answer 3

对DOM中的动态创建的类使用事件委派。否则DOM不知道是否找到了班级。在这些使用事件委托中，它再次从身体的根部进行遍历并找到该类是否被找到并且

注意：使用.addClass()添加新课程而不是.attr()

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

Answer 4

我觉得这可以用$（'。class3'）。removeClass（“class3”）。addClass（'class4'）;

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

4 个答案: