.toggleClass()


.toggleClass( className )返回: jQuery

描述: 为匹配的元素集合中的每个元素上添加或删除一个或多个样式类(class),取决于这个样式类(class)是否存在或state参数的值。(愚人码头注:如果存在(不存在)就删除(添加)一个类。)

  • 添加的版本:1.0.toggleClass( className )

    • className
      类型: String
      用来切换匹配集合中的每个元素的一个或多个样式类名(用空格隔开)。
  • 添加的版本:1.3.toggleClass( className, state )

    • className
      类型: String
      用来切换匹配集合中的每个元素的一个或多个样式类名(用空格隔开)。
    • state
      类型: Boolean
      一个布尔值(不止是真值/假值),用于判断样式是否应该被添加或移除。
  • 添加的版本:1.4.toggleClass( function [, state ] )

    • function
      类型: Function( Integer index, String className, Boolean state ) => String
      一个函数,返回在匹配集合中的每个元素上用来切换的样式类名(class)。接收元素在集合中的索引位置,原先的样式类名,和状态(state)作为参数。
    • state
      类型: Boolean
      一个布尔值,用来判断样式类添加还是移除的。

在jQuery 1.12/2.2 版本之前, .toggleClass()方法操纵是选定元素的className特性(property),不是class属性(attribute)。一旦特性(property)改变,浏览器就会更新相应地的属性(attribute)。此行为的一个言外之意是,这种方法只适用于HTML DOM语义的文档(例如,不是纯XML文档)。

在jQuery1.12/2.2中,改变了这种行为以改善对XML文档,包括SVG的支持。从这个版本开始,class 属性(attribute)被替换(愚人码头注:这个版本开始,.addClass()方法操作的是class 属性(attribute),而不是className特性(property))。因此,..toggleClass()可以在XML或SVG文档中使用。

这个该方法可以接受一个或多个样式类名称作为他的参数。在第一个版本中,如果在匹配的元素集合中的每个元素上存在该样式类就会被移除;如果某个元素没有这个样式类就会加上这个样式类。举个例子: 我们可以应用 .toggleClass() 在简单的 <div>上:

1
<div class="tumble">Some text.</div>

第一次我们应用 $('div.tumble').toggleClass('bounce'), 我们可以得到以下内容:

1
<div class="tumble bounce">Some text.</div>

第二次我能同样应用 $('div.tumble').toggleClass('bounce'), 这个 <div> 样式类回归到单独的 tumble 值:

1
<div class="tumble">Some text.</div>

应用 .toggleClass('bounce spin')在同一个 <div> 上,结果会在 <div class="tumble bounce spin"><div class="tumble">之间交替切换。

.toggleClass()的第二个版本使用第二个参数判断样式类是否应该被添加或删除。如果这个参数的值是true,那么这个样式类将被添加;如果这个参数的值是false,那么这个样式类将被移除。本质上是这样的:

1
$( "#foo" ).toggleClass( className, addOrRemove );

is equivalent to:

1
2
3
4
5
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}

As of jQuery 1.4, if no arguments are passed to .toggleClass(), all class names on the element the first time .toggleClass() is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.

从 jQuery 1.4 开始, 如果不将任何参数传递给 .toggleClass() 方法,那么匹配元素上的所有样式会在该方法第一次执行时被移除,第二次执行时被还原,如此往复。同样的,从 jQuery 1.4 开始,可以用一个函数作为参数,返回应该显示的样式:

1
2
3
4
5
6
7
$( "div.foo" ).toggleClass(function() {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
} else {
return "sad";
}
});

如果匹配元素的父级元素有bar样式类名,这个例子将为<div class="foo">元素切换 happy 样式类; 否则他将切换 sad 样式类 。

例子:

当点击段落的是有切换 'highlight' 样式类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>

例子:

每当第三次点击段落的时候添加 "highlight" 样式类, 第一次和第二次点击的时候移除 "highlight" 样式类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>

例子:

Toggle the class name(s) indicated on the buttons for each div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<style>
.wrap > div {
float: left;
width: 100px;
margin: 1em 1em 0 0;
padding-left: 3px;
border: 1px solid #abc;
}
div.a {
background-color: aqua;
}
div.b {
background-color: burlywood;
}
div.c {
background-color: cornsilk;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="buttons">
<button>toggle</button>
<button class="a">toggle a</button>
<button class="a b">toggle a b</button>
<button class="a b c">toggle a b c</button>
<a href="#">reset</a>
</div>
<div class="wrap">
<div></div>
<div class="b"></div>
<div class="a b"></div>
<div class="a c"></div>
</div>
<script>
var cls = [ "", "a", "a b", "a b c" ];
var divs = $( "div.wrap" ).children();
var appendClass = function() {
divs.append(function() {
return "<div>" + ( this.className || "none" ) + "</div>";
});
};
appendClass();
$( "button" ).on( "click", function() {
var tc = this.className || undefined;
divs.toggleClass( tc );
appendClass();
});
$( "a" ).on( "click", function( event ) {
event.preventDefault();
divs.empty().each(function( i ) {
this.className = cls[ i ];
});
appendClass();
});
</script>
</body>
</html>

例子:

.toggleClass( [state ] )返回: jQuery过时版本: 3.0

描述:

  • 添加的版本:1.4.toggleClass( [state ] )

    • state
      类型: Boolean
      一个布尔值,用来判断样式类添加还是移除的 。
这个签名(只有这个签名!)在 jQuery 3.0中已经被标记为过时