Javascript JQuery不删除类？

所以，我尝试创建一些颜色循环的块。每个颜色都由一个类定义，我删除了一个特定的类颜色，然后在单击块时添加另一个类颜色。每段代码如下所示：

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

语句来监视控制台中发生的事情。例如，当我单击包含

蓝色

类的框时，它会添加

绿色

类，而

蓝色

类将被删除。但是，当我单击同一个框（现在是绿色）时，我希望第二个函数会运行，框会变成黄色。但是，我可以通过控制台看到，第一个函数正在尝试再次运行

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

我的问题是，当第一个框不再是

blue

类的成员时，为什么会触发函数1？它是否应该调用函数2，因为它现在是

green

类的成员

代码笔是，我正在积极地工作。我将在这里提到代码笔何时工作

**代码笔现在可以使用了，我使用了

$（文档）。在（'click'，'.green'）

上，而不是

$（'.green.）。click（）

**

---

谢谢大家!

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

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

在事件注册中，加载页面时只对选择器求值一次，之后对类所做的任何更改都不会影响已注册的处理程序

---

代码片段示例

$（文档）.on（'单击'，'.blue'，函数（）{
log（“蓝色被点击”）；
$（this.addClass（'green'）；
$（this.removeClass（'blue'）；
});
//职能2
$（文档）.on（'单击'，'.green'，函数（）{
log（“绿色被点击”）；
$（this.addClass（'yellow'）；
$（this.removeClass（'green'）；
});
$（文档）.on（'单击'，'.yellow'，函数（）{
log（“已单击黄色”）；
$（this.addClass（'blue'）；
$（this.removeClass（'yellow'）；
});
$（文档）.on（'单击'，'.red'，函数（）{
log（“红色被点击”）；
$（this.addClass（'blue'）；
$（this.removeClass（'red'）；
});
.block{
显示：内联块；
宽度：200px；
高度：100px；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
} 
黄先生{
背景颜色：黄色；
}
瑞德先生{
背景色：红色；
}
由于要根据更改的选择器更改事件处理程序，因此需要使用事件委派

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

在事件注册中，加载页面时只对选择器求值一次，之后对类所做的任何更改都不会影响已注册的处理程序


代码片段示例

$（文档）.on（'单击'，'.blue'，函数（）{
log（“蓝色被点击”）；
$（this.addClass（'green'）；
$（this.removeClass（'blue'）；
});
//职能2
$（文档）.on（'单击'，'.green'，函数（）{
log（“绿色被点击”）；
$（this.addClass（'yellow'）；
$（this.removeClass（'green'）；
});
$（文档）.on（'单击'，'.yellow'，函数（）{
log（“已单击黄色”）；
$（this.addClass（'blue'）；
$（this.removeClass（'yellow'）；
});
$（文档）.on（'单击'，'.red'，函数（）{
log（“红色被点击”）；
$（this.addClass（'blue'）；
$（this.removeClass（'red'）；
});
.block{
显示：内联块；
宽度：200px；
高度：100px；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
} 
黄先生{
背景颜色：黄色；
}
瑞德先生{
背景色：红色；
}
要使用jQuery的.on（）而不是基本事件绑定：
您想使用jQuery的.on（）而不是基本事件绑定：
在这种情况下，您只需使用
toggleClass

在这种情况下，您只需使用
toggleClass

使用
on
而不是
单击
，因为您正在更改div的类，因此必须使用
.on（）
在更改类时获取单击事件绑定

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

使用
on
而不是
单击
，因为您正在更改div的类，因此必须使用
.on（）
在更改类时获取单击事件绑定

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

这些单击仅绑定到元素一次，因此当您更改类时，它们将不在那里。相反，将click事件绑定到“block”类。您可能还希望使用开关或if/else更高效地编写此代码

$(document).ready(function(){
   $('.block').click(function(){
    if($(this).hasClass('blue'))
        {                   
            $(this).addClass('green').removeClass('blue');
        }
    else if($(this).hasClass('green'))
        {
            $(this).addClass('yellow').removeClass('green');
        }
    else if($(this).hasClass('yellow'))
        {
            $(this).addClass('red').removeClass('yellow');
        }
    else if($(this).hasClass('red'))
        {
            $(this).addClass('blue').removeClass('red');
        }

    $('.block').click(function(){
        console.log("Block has been clicked");
    });
 });
});

您可以在此处查看它的工作情况：
这些单击仅绑定到元素一次，因此当您更改类时，它们将不在那里。相反，将click事件绑定到“block”类。您可能还希望使用开关或if/else更高效地编写此代码

$(document).ready(function(){
   $('.block').click(function(){
    if($(this).hasClass('blue'))
        {                   
            $(this).addClass('green').removeClass('blue');
        }
    else if($(this).hasClass('green'))
        {
            $(this).addClass('yellow').removeClass('green');
        }
    else if($(this).hasClass('yellow'))
        {
            $(this).addClass('red').removeClass('yellow');
        }
    else if($(this).hasClass('red'))
        {
            $(this).addClass('blue').removeClass('red');
        }

    $('.block').click(function(){
        console.log("Block has been clicked");
    });
 });
});

您可以在此处查看它的工作情况：
您要做的是：

也可以使用
.on（）
而不是
。单击（）
，因为在事件更改类时必须获取事件，并且
。on（）
提供了.bind（）和.live（）的所有功能

我希望能帮上忙！：）
 您要做的是：

也可以使用
.on（）
而不是
。单击（）
，因为在事件更改类时必须获取事件，并且
。on（）
提供了.bind（）和.live（）的所有功能

我希望能帮上忙！：）
 让我们在这里做些不同的事情。在执行函数之前，我们将在函数上使用
bind
，以传入一个对象参数，函数的作用域（
this
）是在匿名函数或事件委托处理程序中处理的实例


//公共函数
函数更改状态（状态，evArg）
{