默认的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);

});