javascript - JQuery 不删除类？

Question

因此，我正在尝试创建循环显示某些颜色的 block 。每种颜色都由一个类别定义，我删除了某个类别的颜色，然后在单击某个 block 时添加另一个类别的颜色。每段代码如下所示:

//Function 1
$('.blue').click(function(){
    console.log("Blue has been clicked");
    $(this).addClass('green');
    $(this).removeClass('blue');
}); 

//Function 2
$('.green').click(function(){
    console.log("Green has been clicked");
    $(this).addClass('yellow');
    $(this).removeClass('green');
}); 

当第一次点击方 block 时，颜色会改变。但是当我再次点击它时，颜色并没有改变。

我添加了 console.log 语句来监控控制台中发生的事情。例如，当我单击具有 blue 类的框时，它会添加 green 类，并删除 blue 类。但是当我单击同一个框(现在是绿色的)时，我希望第二个函数运行，并且该框会变成黄色。但是，我通过控制台看到的是第一个函数正在尝试再次运行。

我检查了 HTML，类确实发生了变化。

我的问题是，当第一个框不再是 blue 类的成员时，为什么会触发函数 1？它不应该调用函数 2，因为它现在是 green 类的成员吗？

CodePen 是 here ，我正在积极努力。我会在 CodePen 工作时在这里提及。

**CodePen 现在可以使用了，我使用了 $(document).on('click', '.green') 而不是 $('.green').click() **

谢谢!

Answer 1

由于您希望根据已更改的选择器更改事件处理程序，因此您需要使用事件委托(delegate)。

//Function 1
$(document).on('click', '.blue', function () {
    console.log("Blue has been clicked");
    $(this).addClass('green');
    $(this).removeClass('blue');
});

//Function 2
$(document).on('click', '.green', function () {
    console.log("Green has been clicked");
    $(this).addClass('yellow');
    $(this).removeClass('green');
});

在您的事件注册中，选择器仅在页面加载时计算一次，此后对类所做的任何更改都不会影响已注册的处理程序。

---

代码片段示例

$(document).on('click', '.blue', function () {
    console.log("Blue has been clicked");
    $(this).addClass('green');
    $(this).removeClass('blue');
});

//Function 2
$(document).on('click', '.green', function () {
    console.log("Green has been clicked");
    $(this).addClass('yellow');
    $(this).removeClass('green');
});

$(document).on('click', '.yellow', function () {
    console.log("Yellow has been clicked");
    $(this).addClass('blue');
    $(this).removeClass('yellow');
});

$(document).on('click', '.red', function () {
    console.log("Red has been clicked");
    $(this).addClass('blue');
    $(this).removeClass('red');
});

.block{
	display: inline-block;
	width: 200px;
  height: 100px;
}

.green{
	background-color: green;
}

.blue{
	background-color: blue;
} 

.yellow{
	background-color: yellow;
}

.red{
	background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='block green'></div>
<div class='block blue'></div>
<div class='block yellow'></div>
<div class='block red'></div>