轉 ：jQuery.toggleClass() 函數詳解

toggleClass()函數用於切換當前jQuery對象所匹配的每一個元素上指定的css類名。

所謂"切換"，就是如果該元素上已存在指定的類名，則移除掉；如果不存在，則添加該類名。

該函數屬於jQuery對象(實例)。

語法

toggleClass()函數的用法比較復雜，其主要有以下兩種用法：

用法一：

// 參數類型( string )是 v 1.0的用法
// 參數類型( string, boolean )是 v 1.3新增用法
// 參數類型( function [, boolean] )是 v 1.4 新增用法
jQueryObject.toggleClass( classNames [, switch ] )

切換指定的css類名classNames。如果存在指定的類名，則移除該類名；如果存在，則添加該類名。

參數switch用於指定是只添加還是只移除指定的css類名。

用法二：jQuery 1.4 新增該用法。

jQueryObject.toggleClass( [ switch ] )

只要該元素有css類名，或者switch參數為false，toggleClass()將移除該元素所有的css類名。否則(其他任何情況)，都會將元素的class屬性重置為最近一次調用toggleClass()函數(必須是該用法)時的有效class屬性值("有效"意即不為空)。如果沒有有效的class屬性值，則重置class屬性為空字符串。

注意：toggleClass()會"切換"當前jQuery對象所匹配的每一個元素上指定的css類名。

參數

參數	描述
classNames	String/Function類型指定的css類名，字符串可以通過空格分隔的方式來添加多個css類名。或者為返回css類名的函數。
switch	Boolean類型一個布爾值，用於指定是添加還是移除css類名。true表示添加，false表示移除。

jQuery 1.4 新增支持：參數className可以為函數。toggleClass()將根據匹配的所有元素遍歷執行該函數，函數中的this將指向對應的DOM元素。

toggleClass()還會為函數傳入3個參數：第一個參數就是該元素在匹配元素中的索引，第二個參數就是該元素節點當前的class屬性值，第三個參數就是調用toggleClass()時傳入的switch參數。

函數的返回值就是該元素需要切換的css類名(也可以通過空格分隔表示多個css類名)。如果返回值為空白字符串或者undefined，toggleClass()將不會為當前元素切換任何css類名。

返回值

toggleClass()函數的返回值是jQuery類型，返回當前jQuery對象本身。

示例&說明

以下是toggleClass()函數應用時的部分等價代碼，你可以參考理解。

$element.toggleClass( className );
// 相當於
if( $element.hasClass( className ) ){
    $element.removeClass( className );
}else{
    $element.addClass( className ); 
}
//上面的className均表示單個css類名，如果是空格分隔的多個css類名，則等價部分的代碼是需要循環執行的

/* ********** 分割線 ********** */

$element.toggleClass( className, true );
//相當於
$element.addClass( className ); 

/* ********** 分割線 ********** */

$element.toggleClass( className, false );
//相當於
$element.removeClass( className );

以下面這段HTML代碼為例：

<div id="n1">
    <p id="n2" class="demo test">CodePlayer</p>
    <p id="n3" class="foo">專注於編程開發技術分享</p>
</div>

我們編寫如下jQuery代碼：

// 以下注釋中的"當前"均表示在該函數執行之前

var $n2 = $("#n2");
// 切換n2上的一個css類名(當前有"demo"，切換后無"demo")
$n2.toggleClass("demo");
document.writeln( $n2.attr("class") ); // test

//切換n2上的2個css類名(當前無"demo"有"test"，切換后則有"demo"無"test")
$n2.toggleClass("demo test");
document.writeln( $n2.attr("class") ); // demo

var $n3 = $("#n3");
// 為n3添加2個css類名(類名"foo"已存在，不會重復添加)
// 相當於 $n3.addClass("foo bar");
$n3.toggleClass("foo bar", true);
document.writeln( $n3.attr("class") ); // foo bar

// 移除所有的css類名(當前的class屬性值為"foo bar"，有css類名，內部會先存檔再移除)
$n3.toggleClass(false);
document.writeln( $n3.attr("class") ); // (空字符串)

// 恢復為上一次保存的class屬性值(當前的class屬性值為""，沒有css類名，內部不會保存)
// 此時switch不為false，並且元素沒有css類名，因此會恢復為之前保存的class屬性值("foo bar")
$n3.toggleClass(true);
document.writeln( $n3.attr("class") ); // foo bar

// 移除n3上的一個css類名
// 相當於 $n3.removeClass("bar");
$n3.toggleClass("bar", false);
document.writeln( $n3.attr("class") ); // foo

// 移除所有的css類名(當前的class屬性值為"foo"，有css類名，內部會先存檔再移除)
// 由於當前有css類名，因此無論參數是true還是false，都會移除全部的css類名 
$n3.toggleClass(true);
document.writeln( $n3.attr("class") ); // (空字符串)

// 恢復為上次保存的class屬性值(當前的class屬性值為""，沒有css類名，內部不會保存)
//此時switch不為false，並且元素沒有css類名，因此會恢復為之前保存的class屬性值("foo")
$n3.toggleClass(true);
document.writeln( $n3.attr("class") ); // foo

// 當前有css類名，移除所有的css類名(當前的class屬性值為"foo"，有css類名，內部會先存檔再移除)
// 相當於 $n3.toggleClass(true);
$n3.toggleClass();
document.writeln( $n3.attr("class") ); // (空字符串)

// 當前無css類名，恢復為上次保存的class屬性值(當前的class屬性值為""，沒有css類名，內部不會保存)
//此時switch不為false，並且元素沒有css類名，因此會恢復為之前保存的class屬性值("foo")
$n3.toggleClass();
document.writeln( $n3.attr("class") ); // foo

// 切換、強制添加操作針對print-index和printed兩個類名
// 移除只針對print-index (index表示當前元素在匹配元素中的索引)
function callback(index, classNames, _switch){
    // 函數內部的this指向迭代的當前DOM元素
    if( _switch === false){
        return "print-" + index;
    }else{ // true 或 undefined
        return "print-" + index + " printed";
    }   
}

// 這里的true，就是傳遞給函數callback的第三個參數_switch的值
$("p").toggleClass( callback, true);


本文轉自http://www.365mini.com/page/jquery-toggleclass.htm