在jQuery中切换两个不同类之间的方法

Question

我在尝试运行以下代码时遇到了问题：

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

看起来它运行良好，到底发生了什么？

- Yottagray

---

.switchClass() 不是 jQuery 方法。您是否要查找 .toggleClass()？ - Matt Ball

.switchClass() - Yottagray

为了让 switchClass 正常工作，你需要加载 jqueryUI。 - HPWD

Answer 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应该适合您的需求。

- Rion Williams

---

switchClass是jQuery UI的一个特性。我尝试了像你上面展示的toggleClass以及你在评论中展示的更难的方法，但都没有效果。 - Yottagray

plainView/gridView在语法方面似乎不正确：http://api.jquery.com/toggleClass/ - Jeffz

答案语法已根据jQuery API进行了更新。感谢@Guy。 - jibiel

如果第一类别不是一开始就存在于元素上，这并没有帮助。 - vsync

Answer 2

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

例如：

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

- Guy

Answer 3

只需使用toggleClass两次就可以实现魔法。toggleClass是指jQuery中的方法。
该方法将一个或多个类名作为其参数。在第一个版本中，如果匹配元素集中的元素已经具有该类，则会删除它；如果元素没有该类，则会添加。

至于您的问题。

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

希望这可以解决您的问题。

@Guy toggleClass('gridView plainView') 这实际上是在<div class="gridView plainView">和<div class="">之间进行交替，而不是在两个类之间进行切换。没有冒犯之意。希望这能帮到您。

- Adams.H

Answer 4

jQuery也有toggleClass API： http://api.jquery.com/toggleClass/ 它的作用与Rionmonster建议的类似，当类没有设置时添加类，已经设置时则删除。

- Jeremy Whitlock