javascript - 再次单击时jQuery addClass单击和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使用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

使用hasClass()

.hasClass()

要检查分配的课程，请尝试以下操作：

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

Answer 4

工作演示

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

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