toggleClass 用來給匹配元素切換類 語法 "參考 http://www.w3schools.com/jquery/html_toggleclass.asp " 但是個人感覺應該是這樣的： 同時指定了classname和function 只有classname生效 參數說明 Paramete ...
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
|
| 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>
