toggleClass

2022-09-26 13:14:05

toggleClass 用来给匹配元素切换类

语法

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

    $(selector).toggleClass(classname,function(index,currentclass),switch)

但是个人感觉应该是这样的：

    $(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来切换类

<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：

<!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 -->
<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>

码农公寓