Switching between two different classes jQuery

问题:

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 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?

回答1:

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):

$(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.

回答2:

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.

e.g.

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

回答3:

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.

as for ur problem .

$('#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 .

回答4:

jQuery also has a toggleClass API:

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.