Javascript 在两个不同的类 jQuery 之间切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5043235/
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
Switching between two different classes jQuery
提问by Yottagray
Having trouble getting the following code to work:
无法使以下代码正常工作：
$('#changeMode').button().click(function(){
$('#playfield').toggle(function() {
$(this).switchClass("gridView","plainView");
}, function() {
$(this).switchClass("plainView","gridView");
});
});
I cannot get it to switch the following div's class.
我无法让它切换以下 div 的类。
<div id="playfield" class="gridView"></div>
Any ideas?
有任何想法吗？
EDIT: I tried this:
编辑：我试过这个：
$('#changeMode').button().click(function(){
if ($('#playfield').attr('class') == "gridView"){
$('#playfield').removeClass("gridView");
$('#playfield').addClass("plainView");
} else {
$('#playfield').removeClass("plainView");
$('#playfield').addClass("gridView");
}
});
And it seems to work fine, what the heck?
它似乎工作正常，到底是什么？
回答by Rion Williams
I wasn't aware of a switchClass, perhaps you were thinking of toggleClass? Anyways - I had some old code that used this (I was having some strange issues with toggleClass):
我不知道 switchClass，也许你在想 toggleClass？无论如何 - 我有一些使用它的旧代码（我有一些关于toggleClass的奇怪问题）：
$(this).removeClass("gridView").addClass("plainView");
or
$(this).toggleClass("gridView plainView");
and vice versa.
反之亦然。
Example:
例子：
$('#changeMode').button().click(function(){
$('#playfield').toggle(function() {
$(this).toggleClass("gridView plainView");
//$(this).removeClass("gridView").addClass("plainView");
}, function() {
$(this).toggleClass("plainView gridView");
//$(this).removeClass("plainView").addClass("gridView");
});
});
But as others have suggested toggleClass should work for your needs.
但正如其他人所建议的那样， toggleClass 应该可以满足您的需求。
回答by Guy
The correct syntax is to use "One or more class names (separated by spaces).." ( from .toggleClass()) within the first parameter, rather than quoting classnames in the first and second parameter.
正确的语法是在第一个参数中使用“一个或多个类名（用空格分隔）..”（来自.toggleClass()），而不是在第一个和第二个参数中引用类名。
e.g.
例如
$(this).toggleClass("gridView plainView");
回答by Adams.H
just use the toggleClass twice will do the magic . toggoleClass refference to Jquery This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
只需使用 toggleClass 两次即可。toggoleClass 对 Jquery 的引用This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
as for ur problem .
至于你的问题。
$('#changeMode').button().click(function(){
$(this).toggleClass('gridView').toggleClass('plainView');
});
$('#changeMode').button().click(function(){
$(this).toggleClass('gridView').toggleClass('plainView');
});
help this will solve ur problem .
帮助这将解决您的问题。
@Guy toggleClass('gridView plainView')this will actually be alternates bettween <div class="gridView plainView"> and <div class=" ">.and not toggle bettween the two classe . no offence . hope this will do some help .
@GuytoggleClass('gridView plainView')这实际上是<div class="gridView plainView"> and <div class=" ">.在两个 classe 之间切换而不是切换。没有恶意 。希望这会有所帮助。
回答by Jeremy Whitlock
jQuery also has a toggleClass API:
jQuery 还有一个 toggleClass API：
http://api.jquery.com/toggleClass/
http://api.jquery.com/toggleClass/
This works just like what Rionmonster suggested, adding classes when they aren't set on the class and removing them when they are already set.
这就像 Rionmonster 建议的那样，在类上未设置时添加类，并在已设置时删除它们。
