Css 切換

默認的CSS 類切換隻能是無樣式和指定樣式之間的切換，若是想實現樣式1 和樣式2
之間的切換還必須本身寫一些邏輯。
$('div').click(function () {
$(this).toggleClass('red size'); //一開始切換到樣式2
if ($(this).hasClass('red')) { //判斷樣式2 存在後
$(this).removeClass('blue'); //刪除樣式1
} else {
$(this).toggleClass('blue'); //添加樣式1，這裏也能夠addClass
}
});
上面的方法較爲繁瑣，.toggleClass()方法提供了傳遞匿名函數的方式，來設置你所須要
切換的規則。
$('div').click(function () {
$(this).toggleClass(function () { //傳遞匿名函數，返回要切換的樣式
return $(this).hasClass('red') ? 'blue' : 'red size';
});
});
注意：上面雖然一句話實現了這個功能，但仍是有一些小缺陷，由於原來的class 類沒
有被刪除，只不過被替代了而已。因此，須要改寫一下。
$('div').click(function () {
$(this).toggleClass(function () {
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'green';
} else {
$(this).removeClass('green');
return 'red';
}
});
});
咱們也能夠在傳遞匿名函數的模式下，增長第二個頻率參數。
var count = 0;
$('div').click(function () {
$(this).toggleClass(function () {
return $(this).hasClass('red') ? 'blue' : 'red size';
},count++ % 3 == 0); //增長了頻率
});
對於.toggleClass()傳入匿名函數的方法，還能夠傳遞index 索引、class 類兩個參數以及
頻率布爾值，能夠獲得當前的索引、class 類名和頻率布爾值。
var count = 0;
$('div').click(function () {
$(this).toggleClass(function (index, className, switchBool) {
alert(index + ':' + className + ':' + switchBool); //獲得當前值
return $(this).hasClass('red') ? 'blue' : 'red size';
},count++ % 3 == 0);
});