在两个不同的类 jQuery 之间切换答案

【问题标题】：Switching between two different classes jQuery在两个不同的类 jQuery 之间切换
【发布时间】：2011-02-18 15:35:55
【问题描述】：

以下代码无法正常工作：

$('#changeMode').button().click(function(){
    $('#playfield').toggle(function() {
        $(this).switchClass("gridView","plainView");
    }, function() {
        $(this).switchClass("plainView","gridView");
   });      
});

我无法让它切换以下 div 的类。

<div id="playfield" class="gridView"></div>

有什么想法吗？

编辑：我试过这个：

$('#changeMode').button().click(function(){
    if ($('#playfield').attr('class') == "gridView"){
        $('#playfield').removeClass("gridView");
        $('#playfield').addClass("plainView");
    } else {
        $('#playfield').removeClass("plainView");
        $('#playfield').addClass("gridView");
    }
});

而且它似乎工作正常，到底是什么？

【问题讨论】：

.switchClass() 不是 jQuery 方法。你在找.toggleClass()吗？
.switchClass()
要让switchClass工作，你需要加载jqueryUI。

标签： javascript jquery class jquery-ui

【解决方案1】：

我不知道switchClass，也许你在考虑toggleClass？无论如何 - 我有一些使用它的旧代码（我在 toggleClass 上遇到了一些奇怪的问题）：

$(this).removeClass("gridView").addClass("plainView"); 

or

$(this).toggleClass("gridView plainView");

反之亦然。

示例：

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

但正如其他人所建议的那样，toggleClass 应该可以满足您的需求。

【讨论】：

switchClass 是一个 jQuery UI 功能。我尝试了您上面显示的 toggleClass 以及您在 cmets 中显示的更难的方法，但没有效果。
plainView/gridView 在语法上似乎不正确：api.jquery.com/toggleClass
答案语法已根据jQuery API 进行了更新。感谢@Guy。
如果第一个类不在元素上，则无济于事。

【解决方案2】：

正确的语法是在第一个参数中使用“一个或多个类名（用空格分隔）..”（来自.toggleClass()），而不是在第一个和第二个参数中引用类名参数。

例如

$(this).toggleClass("gridView plainView");

【讨论】：

【解决方案3】：

只需使用 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.

至于你的问题。

$('#changeMode').button().click(function(){ $(this).toggleClass('gridView').toggleClass('plainView'); });

帮助这将解决你的问题。

@Guy toggleClass('gridView plainView') 这实际上是
<div class="gridView plainView"> and <div class=" ">. 之间的替代，而不是在两个 classe 之间切换。没有恶意。希望这会有所帮助。

【讨论】：

【解决方案4】：

jQuery 也有一个 toggleClass API：

http://api.jquery.com/toggleClass/

这就像 Rionmonster 建议的那样，在类上未设置类时添加类，并在已设置类时删除它们。

【讨论】：