jQuery.toggleClass() 函數詳解

內容目錄

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

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

該方法檢查每一個元素中指定的類。若是不存在則添加類，若是已設置則刪除之。這就是所謂的切換效果。

經過使用 "switch" 參數，可以規定只刪除或只添加類。

該函數屬於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);

https://blog.csdn.net/weixin_37580235/article/details/80735126