2011-02-18 102 views
17

有麻烦下面的代码工作之间切换:两种不同类型的jQuery

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

它似乎做工精细,究竟发生了什么?

+1

`.switchClass()`不是一个jQuery方法。你在寻找[`.toggleClass()`](http://api.jquery.com/toggleClass)吗? – 2011-02-18 15:45:07

+1

[.switchClass()](http://docs.jquery.com/UI/Effects/switchClass) – Yottagray 2011-02-18 16:04:33

回答

35

我没有意识到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应该为你的工作需要。

2

jQuery的也有toggleClass API:

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

这个作品就像什么Rionmonster建议,添加类时,他们没有在类设置和删除他们时,他们已经设定。

5

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

例如

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

只需使用toggleClass两次就可以了。 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.

至于你的问题。

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

帮助这将解决乌尔问题。

@Guy toggleClass('gridView plainView')这实际上是bettween
<div class="gridView plainView"> and <div class=" ">.交替,而不是切换bettween两个CLASSE。没有恶意 。希望这会有所帮助。