[英]JQuery toggle and remove css classes
I have the following CSS: 我有以下CSS:
.red {background-color: #CC0000;}
.green {background-color: #009900;}
and my HTML is: 而我的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>
and I am using the following script to change class on divs: 我正在使用以下脚本更改div上的类:
$(document).ready(function() {
$(".red , .green").click(function(){
$(".green").removeClass("green").addClass("red");
$(this).toggleClass('red green');
});
});
Works fine to change div class onclick from .red to .green but when I click on the "green" the div doesn't becomes "red". 可以很好地将div类的onclick从.red更改为.green,但是当我单击“绿色”时,div不会变为“红色”。 I other words I would like to have or all "red" or just ONE "green" div ALSO nothing is working if I change the sequence of .red - .green in my CSS
换句话说,如果我更改CSS中.red-.green的序列,则我希望拥有全部或全部的“ red”或仅一个“ green” div也无法正常工作
Any thoughts? 有什么想法吗? Thanks in advance
提前致谢
不要包含被点击的元素...
$(".green").not(this).removeClass("green").addClass("red");
Only using toggleClass() should work. 仅使用toggleClass()应该有效。 So remove following line from your code $(".green").removeClass("green").addClass("red");
因此,从代码$(“。green”)。removeClass(“ green”)。addClass(“ red”);中删除以下行
Solution:- 解:-
$(document).ready(function() {
$(".red , .green").click(function(){
$(this).toggleClass('red green');
});
});
Is this what you are expecting? 这是您所期望的吗? http://jsfiddle.net/k23g3ne4/
http://jsfiddle.net/k23g3ne4/
this is working : 这正在工作:
$(this).siblings('.red , .green')
.removeClass("green")
.addClass("red");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.