如果使用jQuery更新类后hasClass条件不工作

Question

这里是jQuery的条件，如果hasclass不工作时，我从jQuery更新类，原因是什么?意味着如果我改变/更新类，然后也Jquery如果条件工作在点击，而不是它不应该工作之后。

在我的例子中，首先，divSome Content的类别为.L2D1，颜色为蓝色好的，然后我的jQuery条件是如果Some Content的类别为.L2D1意味着直到它的颜色为蓝色然后它应该应该改变Some Other Content的颜色为红色

但是当我改变了类.L2D1从jQuery Onclick更改类按钮，然后它的类更改为.newClass然后我的jQuery如果条件工作为什么?

我在哪里犯了错误，请解决它。从字面上看，我不明白实际的问题。

看到这个:

$('.ChangeClass').click(function () {
$(".L2D1").attr('class', 'newClass');
}); 
$(document).ready(function(){
if ($("#L2D1-id").hasClass("L2D1")) {
$('.ChangeColor').click(function () {
$(".Layout-2").addClass('intro');
});     
} 
});

.intro {
font-size: 120%;
color: red;
}
.newClass {
font-size: 120%;
color: green;
}
.L2D1 {
font-size: 100%;
color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="L2D1" id="L2D1-id"> Some Content </div>

<div class="Layout-2"> Some Other Content </div>
<button class="ChangeClass">Change Class</button>
<button class="ChangeColor"> <!-- if ($("#L2D1-id").hasClass("L2D1")) Then { -->  Change Color</button>

Answer 1

您的事件是在脚本加载时创建的。因此，在

之后从不测试if语句。要解决这个问题，您可以将if语句放入事件中，如:

$('.ChangeClass').click(function() {
$(".L2D1").attr('class', 'newClass');
});
$(document).ready(function() {
$('.ChangeColor').click(function() {
if ($("#L2D1-id").hasClass("L2D1")) {
$(".Layout-2").addClass('intro');
}
});
});

.intro {
font-size: 120%;
color: red;
}
.newClass {
font-size: 120%;
color: green;
}
.L2D1 {
font-size: 100%;
color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="L2D1" id="L2D1-id"> Some Content </div>

<div class="Layout-2"> Some Other Content </div>
<button class="ChangeClass">Change Class</button>
<button class="ChangeColor"> <!-- if ($("#L2D1-id").hasClass("L2D1")) Then { -->  Change Color</button>