toggleClass

发布于 2016-08-16 14:34 阅读数 115

本文必须得到作者授权后,方可转载,摘要引流随意。
By 依韵 , From https://blog.cdswyda.com/post/20160816

toggleClass 用来给匹配元素切换类

语法

参考 http://www.w3schools.com/jquery/html_toggleclass.asp

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
  • index - Returns the index position of the element in the set
  • currentclass - Returns current class name of selected elements
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>

Comments
Write a Comment