您的位置：首页 > Web前端 > JQuery

jquery toggleClass()的用法

2010-11-10 16:18 330 查看
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可以传入一个函数了,功能更加的强大
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航