JQuery未删除类

JQuery not removing class?

本文关键字：删除 JQuery      更新时间：2023-09-26

因此，我正在尝试创建在某些颜色中循环的块。每种颜色都是由一个类定义的，我删除了某个类的颜色，然后在单击块时添加另一种类的颜色。每段代码看起来像这样：

//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？既然它现在是green类的成员，它是否应该不调用函数2？

CodePen在这里，我正在积极研究。当CodePen工作时，我会在这里提到。

**CodePen现在可以工作了，我使用了$(document).on('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');
});

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

代码段示例

$(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>

使用on而不是click，因为您正在更改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');
});

小提琴

您要做的是：http://jsfiddle.net/drxzLqrL/1/

 $(document).ready(function(){
    function foo($elm){
        var color = $elm.data('color');
        switch (color) {
            case 'blue':
                $elm.addClass('green')
                    .removeClass('blue')
                    .data('color', 'green');
                break;
            case 'green':
                $elm.addClass('yellow')
                        .removeClass('green')
                        .data('color', 'yellow');
                break;
            case 'yellow':
                $elm.addClass('red')
                    .removeClass('yellow')
                    .data('color', 'red');
                break;
            case 'red':
                $elm.addClass('blue')
                    .removeClass('red')
                    .data('color', 'blue');
        }
    }
    $('.block').on('click', function(e){
        foo($(e.currentTarget));
    }); 
});

也可以使用.on()而不是.click()，因为当事件更改类时必须获取该事件，并且.on()为您提供了.bind（）和.live（）的所有功能

我希望它能有所帮助！：）

您希望使用jQuery的.on（）而不是基本的事件绑定：https://api.jquery.com/on/

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

FIDDLE

这些点击只绑定到元素一次，因此在更改类时不会出现。相反，请将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");
    });
 });
});

你可以在这里查看它的工作：http://codepen.io/anon/pen/pvGPyx

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

//Common Function
function ChangeState(state, evArg)
{
  console.clear();
  console.log("this: %o, state: %o, evArg: %o", this, state, evArg);
  $(this).addClass(state.new);
  $(this).removeClass(state.old);
}
//Function 1
$(document).on("click", ".blue", function(evArg){
  ChangeState.bind(this,{"old":"blue","new":"yellow"}, evArg)();
});
$(document).on("click", ".yellow", function(evArg){
  ChangeState.bind(this,{"old":"yellow","new":"red"}, evArg)();
});
$(document).on("click", ".red", function(evArg){
  ChangeState.bind(this,{"old":"red","new":"green"}, evArg)();
});
$(document).on("click", ".green", function(evArg){
  ChangeState.bind(this,{"old":"green","new":"blue"}, evArg)();
});
.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>

相关文章：