如果hasClass条件在用jQuery更新类后不起作用

Question

当我从Jquery更新类时，如果有类不能工作，这是jQuery条件，原因是什么？这意味着如果我更改/更新类，那么如果Jquery条件在单击时工作，那么在那之后它就不应该工作了。

在我的例子中，首先div Some Content有类.L2D1，它的颜色是蓝色，好的，那么我的jQuery条件是，如果Some Content有类.L2D1的意思，直到它的颜色是蓝色，那么它应该改变Some Other Content div的颜色，即红色。

但是，当我将类.L2D1从jQuery按下“更改类”按钮时，它的类更改为“.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>

​