jquery toggleClass()的用法

toggleClass(class)

說明:如果存在（不存在）就刪除（添加）一個類。

如果匹配元素集合中元素沒有使用樣式‘class’則對該元素加入樣式‘class’；如果已經使用該樣式，則從該元素中刪除該樣式。

view source

print?

1	$("div").toggleClass("highlight");

點擊div元素後，如果匹配div元素集合中包含樣式‘highlight’則刪除該樣式，沒有包含‘highlight’樣式則增加該樣式

下面是jQuery1.2.6中toggleClass的源碼：

view source

print?

01	function (value, stateVal) {

02	var type = typeof value,

03	isBool = typeof stateVal === "boolean";

04	if (jQuery.isFunction(value)) {

05	return this.each(function (i) {

06	var self = jQuery(this);

07	self.toggleClass(value.call(this, i, self.attr("class"), stateVal), stateVal);

08

});

09

}

10	return this.each(function () {

11	if (type === "string") {

12	var className, i = 0,

13	self = jQuery(this),

14	state = stateVal,

15	classNames = value.split(rspace);

16	while ((className = classNames[i++])) {

17	state = isBool ? state : !self.hasClass(className);

18	self[state ? "addClass" : "removeClass"](className);

19

}

20	} else if (type === "undefined" || type === "boolean") {

21	if (this.className) {

22	jQuery.data(this, "__className__", this.className);

23

}

24	this.className = this.className || value === false ? "" : jQuery.data(this, "__className__") || "";

25

}

26

});

27

}

toggleClass( class, switch )

如果開關switch參數為true則加上對應的class，否則就刪除。

傳回值：jQuery

參數：

class(String) :要切換的css類名。

switch(Boolean) :用於決定是否切換class的布爾值。

當switch是true時添加類，當switch是false時刪除類

我們來看下這個switch的使用方法

每點擊三下加上一次 'selected' 類：

jQuery 代碼:

view source

print?

1	var count = 0;

2	$("p").click(function(){

3	$(this).toggleClass("highlight", count++ % 3 == 0);

4

});

原來是傳入一個運算式來決定是否切換class，因為toggleclass預設是來回切換的,在上面的列子就實現了點擊三下才切換class

jquery1.3.2以上的版本toggleClass也可以和addClass一樣，用空格分隔多個class名稱了

view source

print?

1	.toggleClass(“a b”) ==  .toggleClass(“a”).toggleClass(“b”)

無參數時，自動刪除、恢複全部class，也可以傳遞一個布爾值，true為恢複class，false為刪除class 也可以第一個參數為class名，第二個參數為布爾值，具體用法如下:

view source

print?

01

/ 原始代碼

02	// <div class=”a b c”></div>

03	// 刪除、恢複全部class

04	$(‘div’).toggleClass();        // <div class=”" />

05	$(‘div’).toggleClass();        // <div class=”a b c” />

06	$(‘div’).toggleClass( false ); // <div class=”" />

07	$(‘div’).toggleClass( true );  // <div class=”a b c” />

08	// 刪除、恢複多個 class

09	$(‘div’).toggleClass( “a b” );          // <div class=”c” />

10	$(‘div’).toggleClass( “a c” );          // <div class=”a” />

11	$(‘div’).toggleClass( “a b c”, false ); // <div class=”" />

12	$(‘div’).toggleClass( “a b c”, true );  // <div class=”a b c” />

jQuery1.4.2版本還可以傳入當前值作為設定函數的第二個參數，供設定函數使用

.toggleClass( function(index, class), [ switch ] )

view source

print?

1	$('div.foo').toggleclass(function() {

2	if ($(this).parent().is('.bar') {

3	return 'happy';

4

} else {

5	return 'sad';

6

}

7

});

jQuery1.4中的toggleClass可以傳入一個函數了,功能更加的強大