toggleClass

xiaoxiao2026-05-11 3

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生效

参数说明

ParameterDescriptionclassnameRequired. Specifies one or more class names to add or remove. To specify several classes, separate the class names with a spacefunction(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 setcurrentclass - Returns current class name of selected elementsswitchOptional. 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>

点击按钮切换：

<ul> <li class="">Peter</li> <li class="">Lois</li> <li class="">Chris</li> <li class="">Stewie</li> </ul>  <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>

转载请注明原文地址: https://ju.6miu.com/read-1309557.html

最新回复(0)