toggleClass
发布于 2016-08-16 14:34 阅读数 115
本文必须得到作者授权后,方可转载,摘要引流随意。
By 依韵 , From https://blog.cdswyda.com/post/20160816
toggleClass 用来给匹配元素切换类
语法
1 | $(selector).toggleClass(classname,function(index,currentclass),switch)
|
但是个人感觉应该是这样的:
1 2 3 | $(selector).toggleClass(classname)
$(selector).toggleClass(classname,switch)
$(selector).toggleClass(function(index,currentclass),switch)
|
同时指定了classname和function 只有classname生效
参数说明
Parameter | Description |
---|---|
classname | Required. Specifies one or more class names to add or remove. To specify several classes, separate the class names with a space |
function(index,currentclass) | Optional. Specifies a function that returns one or more class names to add/remove
|
switch | Optional. A Boolean value specifying if the class should only be added (true), or only be removed (false) |
解释
- classname 必须的,指定一个或多个类名来添加或移除,多个类名之间用空格分隔
- function(index,currentclass) 可选的 使用一个方法来返回一个或多个类名来添加或删除,
index 返回元素的在集合中的序号 currentclass 返回选中元素当前的类名
- switch 可选 布尔值,如果为true 则只添加 false只删除 相当于addClass和removeClass
demo
指定classname来切换类
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style>
.main {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="main">This is another paragraph.</p>
<button>Toggle class "main" for p elements</button>
</body>
</html>
|
结果 :
点击切换按钮后,两个段落的文本红色显示将进行切换,默认第一个没有main而第二个有 第一次点击时,给第一个添加 给第二个移除,之后的点击以此类推
- 如果一次操作多个类 类名之间空格分隔即可
参数switch
加上参数switch 值为true或false
为true是只添加,false只移除,作用应该和addClass removeClass 相同
function返回类名
关于使用function来返回类名,在一个w3c上的demo:
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 | <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery-1.11.0.min.js"></script>
<style>
.listitem_1,
.listitem_3 {
color: red;
}
.listitem_0,
.listitem_2 {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>Peter</li>
<li>Lois</li>
<li>Chris</li>
<li>Stewie</li>
</ul>
<button>Add/remove classes to list items</button>
</body>
<script>
$(document).ready(function() {
$("button").click(function() {
$("li").toggleClass(function(n) {
return "listitem_" + n;
});
});
});
</script>
</html>
|
点击按钮切换:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- 状态1 -->
<ul>
<li class="">Peter</li>
<li class="">Lois</li>
<li class="">Chris</li>
<li class="">Stewie</li>
</ul>
<!-- 状态2 -->
<ul>
<li class="listitem_0">Peter</li>
<li class="listitem_1">Lois</li>
<li class="listitem_2">Chris</li>
<li class="listitem_3">Stewie</li>
</ul>
|
2016-08-16 14:34
115
Comments