JQuery没有删除类？

Question

所以,我正在尝试创建循环通过某些颜色的块.每种颜色都由一个类定义,我删除某个类颜色,然后在单击一个块时添加另一个类颜色.每段代码如下所示:

//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');
}); 

第一次单击某个块时,颜色会发生变化.但是当我再次点击它时,颜色不会改变.

我添加了一些console.log语句来监视Console中发生了什么.例如,当我单击一个包含blue该类的框时,它会添加green该类,并blue删除该类.但是当我点击相同的框(现在是绿色)时,我希望第二个功能运行,并且框变为黄色.但是,我通过控制台可以看到第一个功能是尝试再次运行.

我检查了HTML,并且类确实发生了变化.

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

CodePen就在这里,我正积极致力于此.CodePen工作时我会在这里提到.

**CodePen现在可以使用了,我使用的是$(document).on('click', '.green')代替$('.green).click()**

谢谢!

Answer 1

由于您希望根据更改的选择器更改事件处理程序,因此您需要使用事件委派.

//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>