再次单击时,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再使用类似

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

这是另一个小提琴