使用 jQuery 切换多个元素类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5505477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle multiple element classes with jQuery
提问by santa
I need to be able to toggle class when I click an element. It works fine for that element:
我需要能够在单击元素时切换类。它适用于该元素：
$(".main").click(function() {
$(this).toggleClass("classA").toggleClass("classB");
});
But I would like to add to it to toggle classes for all elements on the page that have a particular class, say "togToo". For those elements I need to toggle between "classC" and "classD".
但我想添加到它来切换页面上具有特定类的所有元素的类，比如“togToo”。对于那些元素，我需要在“classC”和“classD”之间切换。
I'm almost certain there's a way to combine that into one click...
我几乎可以肯定有一种方法可以将其合并为一次单击...
^^^ UPDATED ABOVE ^^^
^^^ 以上更新^^^
采纳答案by Naftali aka Neal
Answer Updated
答案更新
$(".main").click(function() {
$(this).toggleClass("classA").toggleClass("classB");
$('.togToo').toggleClass("classC").toggleClass("classD");
})
回答by Ken Redler
If the elements to be toggled start off with one of the two classes, you can then toggle back and forth like this:
如果要切换的元素从两个类之一开始，您可以像这样来回切换：
$('#element_to_click').click( function(){
$('.togToo').toggleClass('classC classD');
});
回答by Boris
You can toggle N classes all at once
你可以一次切换 N 个类
$(/* selector */).toggleClass('classA classB classC');
回答by Effata
This should do the trick:
这应该可以解决问题：
$(".main").click(function() {
$(this).toggleClass("classA").toggleClass("classB");
$(".togToo").toggleClass("classC").toggleClass("classD");
));
Also, when toggling classes, i would suggest having a base class, and a toggle class, instead of toggling between two classes.
另外，在切换类时，我建议有一个基类和一个切换类，而不是在两个类之间切换。
回答by archil
Why won't you use jQuery class selector?
为什么不使用 jQuery 类选择器？
$('.togToo').toggleClass("classC").toggleClass("classD");
回答by ArtoAle
You can simply do something like
你可以简单地做类似的事情
$(".classC").toggleClass("ClassD");
inside the "click" handler
在“点击”处理程序内
回答by jmayeux
I do it this way, having multiple images with class $('.img-polaroid') and class $('.drag'), when one of the images is clicked, it remove the $('.drag') to this element after having add it back to all of them
我这样做，具有类 $('.img-polaroid') 和类 $('.drag') 的多个图像，当单击其中一个图像时，它将 $('.drag') 删除到此将元素添加回所有元素后
$('.img-polaroid').click(function(){
if ($(this).hasClass('drag'))
{
$('.img-polaroid').addClass('drag');
$(this).removeClass('drag');
}
});
回答by chitzui
If you're looking for a way to toggle through mutliple classes one after each other and not all together I quickly wrote a little script you can use:
如果您正在寻找一种方法来一个接一个地切换多个类，而不是一起切换，我很快就编写了一个小脚本，您可以使用：
https://github.com/ThibaultJanBeyer/.toggleClasses-for-jQuery
https://github.com/ThibaultJanBeyer/.toggleClasses-for-jQuery
it extends a new jQuery method .toggleClasses() that does exactly what you want. check it out and feel free to make it better if you have improvements :)
它扩展了一个新的 jQuery 方法 .toggleClasses() ，它完全符合您的要求。检查一下，如果您有改进，请随时让它变得更好:)
