JQuery 切换和删除 css 类答案

【问题标题】：JQuery toggle and remove css classesJQuery 切换和删除 css 类
【发布时间】：2015-08-18 01:46:52
【问题描述】：

我有以下 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 不会变为“红色”。换句话说，我想拥有或所有“红色”或只有一个“绿色”div 如果我在我的 CSS 中更改 .red - .green 的顺序，也没有任何效果

有什么想法吗？在此先感谢

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

不要包含被点击的元素...

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

【讨论】：

【解决方案2】：

只有使用 toggleClass() 才能工作。所以从你的代码中删除以下行 $(".green").removeClass("green").addClass("red");

解决方案：-

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

这是您所期待的吗？ http://jsfiddle.net/k23g3ne4/

【讨论】：

【解决方案3】：

这是有效的：

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

【讨论】：