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);
});

Css 切换

标签：

原文地址：http://www.cnblogs.com/zzhui/p/5138715.html