2011-02-18 100 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。沒有惡意 。希望這會有所幫助。