JQuery 不删除 class？

Question

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

//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 语句以在控制台中监视正在发生的事情。例如，当我单击具有 blue class 的框时，它会添加 green class，并且 blue class 是删除。但是当我单击同一个框（现在是绿色的）时，我希望第二个函数为运行，并且该框会变为黄色。但是，我可以通过控制台看到的是第一个函数正在尝试再次运行。

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

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

CodePen 是 here，我正在积极努力。 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>

Answer 2

您想使用 jQuery 的 .on() 而不是基本的事件绑定： https://api.jquery.com/on/

Answer 3

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

FIDDLE

Answer 4

使用 on 而不是 click，因为您要更改 div 的 class，所以您必须使用 .on() 才能获得单击事件在更改 class

时绑定

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

fiddle

Answer 5

这些点击仅绑定到元素一次，因此当您更改 class 时它们不会出现。相反，将点击事件绑定到 'block' class。您可能还想使用开关或 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

Answer 6

你想做的是：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()，因为当它更改 class 和 .on() 时您必须获取事件，为您提供两者的所有功能。 bind() 和 .live()

希望对您有所帮助！ :)

Answer 7

让我们在这里做些不同的事情。我们将在函数上使用 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>

JQuery 不删除 class？

JQuery not removing class?

html

javascript

css

jquery

stylesheet

代码片段示例