jQuery addClass 单击并再次单击时删除Class

jQuery addClass click and removeClass when click again

提问by KevDev

I have a box without color. if the box is being click()it will addClass('.red')to make it red, and if click again the box color change to blue. they change alternatively. and I don't know how to make it.

我有一个没有颜色的盒子。如果框正在click()，它将addClass('.red')使其变为红色，如果再次单击，框颜色将变为蓝色。它们交替变化。我不知道怎么做。

Code

代码

HTML

HTML

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

CSS

CSS

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

.red {
    background: red;
}

.blue {
    background: blue;
}

Javascript

Javascript

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

link of jsfiddle

jsfiddle的链接

回答by Gautam3164

Try with toggleClasslike

尝试toggleClass喜欢

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

If you want to toggle 2 classesredand bluethen use like

如果你想切换2 classesred和blue再使用类似

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

回答by billyonecan

If you want to change from white to red, and then red to blue, you can't use toggleClass(). You'd have to write some simple conditions to decide which class to add:

如果要从白色变为红色，再由红色变为蓝色，则不能使用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

这是一把小提琴

If you only want to switch between the classes red and blue, just add one of the classes to the markup, so that you can toggle between them:

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

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

Then just use toggleClass():

然后只需使用toggleClass()：

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

Here's another fiddle

这是另一个小提琴

回答by Daniele

use hasClass()

使用hasClass()

.hasClass()

to check the assigned class, try something like this:

要检查分配的班级，请尝试以下操作：

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

回答by Jay Shukla

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

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