再次单击时，jQuery addClass click和removeClass

Question

我有一个没有颜色的盒子。如果该框为click()，它将addClass('.red')使其变为红色，如果再次单击，则框颜色变为蓝色。他们交替改变。而且我不知道如何制作它。

代码

HTML

<div class='box'></div>

CSS

.box {          
    width: 250px;
    height: 100px;    
    border: 1px #000 solid;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

的Javascript

$('div').click(function() {
    $(this).addClass('red');
});

link of jsfiddle

Answer 1

尝试toggleClass喜欢

$('div').click(function() {
    $(this).toggleClass("red");
});    

如果您想切换2 classes red和blue，请使用

$('div').click(function() {
    $(this).toggleClass("red blue");
});

Answer 2

如果您想要从白色变为红色，然后从红色变为蓝色，则无法使用toggleClass()。你必须写一些简单的条件来决定要添加哪个类：

$('div').click(function() {
    var $this = $(this);
    if ($this.hasClass('blue')) {
        $this.removeClass();
    } else if ($this.hasClass('red')) {
        $this.removeClass('red').addClass('blue');
    } else {
        $this.addClass('red');
    }
});

Here's a fiddle

如果您只想在红色和蓝色类之间切换，只需将其中一个类添加到标记中，以便您可以在它们之间切换：

<div class="blue">Hello World!</div>

然后只使用toggleClass（）：

$('div').click(function() {
    $(this).toggleClass('red blue');
});

Here's another fiddle

Answer 3

Working DEMO

  $('div').click(function() {
    if($(this).hasClass('red'))
    {
        $(this).addClass('blue').removeClass('red');
    }
    else
    {
       $(this).addClass('red').removeClass('blue');
    }
  });

Refer this API documentation for more about toggleClass

Answer 4

使用hasClass()

.hasClass()

检查指定的类，尝试这样的事情：

$('div').click(function() {
    if($('div').hasClass('red')) {       
        $(this).removeClass('red').addClass('blue');
    }
    else{
        $(this).removeClass('blue').addClass('red');
    }
});