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');
});   
});

正常工作可以将.class从.red更改为.green但是当我点击“绿色”时，div不会变为“红色”。换句话说，我想拥有或全部为“红色”或只有一个“绿色”div 如果我在CSS中更改.red - .green的序列

，也没有任何工作

有什么想法？提前致谢

Answer 1

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

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

Answer 2

只能使用toggleClass（）才能正常工作。因此，从代码中删除以下行 $（＆＃34;。绿色＆＃34）removeClass（＆＃34;绿色＆＃34）。addClass（＆＃34;红色＆＃34）;

<强>解决方案： -

$(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");

JQuery切换和删除css类

3 个答案: