再次单击时，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');
});

jsfiddle的链接

Answer 1

尝试使用toggleClass

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

如果你想切换2 classes red和blue 2 classes ，那么使用like

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

这是一个小提琴

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

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

然后只使用toggleClass（）：

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

这是另一个小提琴

Answer 3

工作演示

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

有关toggleClass的更多信息，请参阅此API文档

Answer 4

使用hasClass（）

.hasClass()

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

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