jQuery切換並刪除CSS類

Question

我有以下CSS：

.red {background-color: #CC0000;}
.green {background-color: #009900;}

而我的HTML是：

div class="red" id="ch1">Content</div>
<div class="red" id="ch2">Content</div>
<div class="red" id="ch3">Content</div>
...
<div class="green" id="ch..">Content</div>
<div class="red" id="ch..">Content</div>

我正在使用以下腳本更改div上的類：

$(document).ready(function() { 
$(".red , .green").click(function(){
    $(".green").removeClass("green").addClass("red");
     $(this).toggleClass('red green');
});   
});

可以很好地將div類的onclick從.red更改為.green，但是當我單擊“綠色”時，div不會變為“紅色”。 換句話說，如果我更改CSS中.red-.green的序列，則我希望擁有全部或全部的“ red”或僅一個“ green” div也無法正常工作

有什么想法嗎？ 提前致謝

Answer 1

不要包含被點擊的元素...

$(".green").not(this).removeClass("green").addClass("red");

Answer 2

僅使用toggleClass（）應該有效。 因此，從代碼$（“。green”）。removeClass（“ green”）。addClass（“ red”）;中刪除以下行

解：-

$(document).ready(function() { 
    $(".red , .green").click(function(){
        $(this).toggleClass('red green');
    });   
});

這是您所期望的嗎？ http://jsfiddle.net/k23g3ne4/

Answer 3

這正在工作：

$(this).siblings('.red , .green')
  .removeClass("green")
  .addClass("red");