.toggleClass()
.toggleClass( className ) 返回： jQuery
描述： 在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類,取決于這個(gè)樣式類是否存在或價(jià)值切換屬性。即：如果存在（不存在）就刪除（添加）一個(gè)類。
-
version added: 1.0.toggleClass( className )
className在匹配的元素集合中的每個(gè)元素上用來切換的一個(gè)或多個(gè)（用空格隔開）樣式類名。
-
version added: 1.3.toggleClass( className, switch )
className在匹配的元素集合中的每個(gè)元素上用來切換的一個(gè)或多個(gè)（用空格隔開）樣式類名。
switch一個(gè)用來判斷樣式類添加還是移除的 boolean 值。
-
version added: 1.4.toggleClass( function(index, class), [ switch ] )
function(index, class)用來返回在匹配的元素集合中的每個(gè)元素上用來切換的樣式類名的一個(gè)函數(shù)。接收元素的索引位置和元素舊的樣式類作為參數(shù)。
switch一個(gè)用來判斷樣式類添加還是移除的 boolean 值。
這個(gè)該方法以一個(gè)或多個(gè)樣式類名稱作為他的參數(shù)。在第一個(gè)版本中，如果在匹配的元素集合中的每個(gè)元素上存在該樣式類就會(huì)被移除；如果某個(gè)元素沒有這個(gè)樣式類就會(huì)加上這個(gè)樣式類。舉個(gè)例子： 我們可以應(yīng)用 .toggleClass() 在簡(jiǎn)單的 <div>上：
<div class="tumble">Some text.</div>
第一次我們應(yīng)用 $('div.tumble').toggleClass('bounce'), 我們可以得到以下內(nèi)容:
<div class="tumble bounce">Some text.</div>
第二次我能同樣應(yīng)用 $('div.tumble').toggleClass('bounce'), 這個(gè) <div> 樣式類回歸到單獨(dú)的 tumble 值：
<div class="tumble">Some text.</div>
應(yīng)用 .toggleClass('bounce spin')在同一個(gè) <div> 上，結(jié)果會(huì)在 <div class="tumble bounce spin"> 和 <div class="tumble">之間交替。
.toggleClass()的第二個(gè)版本使用第二個(gè)參數(shù)判斷樣式類是否應(yīng)該被添加或刪除。如果這個(gè)參數(shù)的值是true，那么這個(gè)樣式類將被添加;如果這個(gè)參數(shù)的值是false，那么這個(gè)樣式類將被移除。本質(zhì)上是這樣的:
$('#foo').toggleClass(className, addOrRemove);
等價(jià)于:
if (addOrRemove) {
$('#foo').addClass(className);
}
else {
$('#foo').removeClass(className);
}
在 jQuery 1.4 中, .toggleClass()方法允許我們通過函數(shù)來傳遞切換的樣式類名。
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar')) {
return 'happy';
} else {
return 'sad';
}
});
如果匹配元素的父級(jí)元素有bar樣式類名，這個(gè)例子將為<div class="foo">元素切換 happy 樣式類； 否則他將切換 sad 樣式類 。
舉例：
例子： 當(dāng)點(diǎn)擊段落的是有切換 'highlight' 樣式類
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>Demo:
例子： 每當(dāng)?shù)谌吸c(diǎn)擊段落的時(shí)候添加 "highlight" 樣式類, 第一次和第二次點(diǎn)擊的時(shí)候移除 "highlight" 樣式類
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:red; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
<p class="blue">on these (<span>clicks: 0</span>)</p>
<p class="blue">paragraphs (<span>clicks: 0</span>)</p>
<script>
var count = 0;
$("p").each(function() {
var $thisParagraph = $(this);
var count = 0;
$thisParagraph.click(function() {
count++;
$thisParagraph.find("span").text('clicks: ' + count);
$thisParagraph.toggleClass("highlight", count % 3 == 0);
});
});
</script>
</body>
</html>