再次單擊時，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');
    }
});