jQuery toggleClass
jQuery toggleClass一、jQuery 中 toggleClass方法的理解
1、用于切换当前jQuery对象所匹配的每一个元素上指定的css类名。
2、所谓"切换"，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。
二、toggleClass语法
1、类的切换
$(selector).toggleClass(class,switch)
参数说明
class
(1)、必需。规定添加或移除 class 的指定的css类名。
(2)、如需规定若干 class，请使用空格来分隔类名。
switch
(1)、可选。布尔值。
(2)、用于指定是只添加(true)还是只移除(false)指定的css类名。
2、使用函数来切换类
$(selector).toggleClass(function(index,class),switch)
参数说明
function(index,class)
(1)、必需。规定返回需要添加或删除的一个或多个类名的函数。
(2)、index - 可选。接受选择器的 index 位置。
(3)、class - 可选。接受选择器的当前的类。
switch
可选。布尔值。规定是否添加(true)或移除(false)类。
三、toggleClass 与 js 的等价代码
$element.toggleClass( className );
// 相当于
if( $element.hasClass( className ) ){
$element.removeClass( className );
}else{
$element.addClass( className );
}
//上面的className均表示单个css类名，如果是空格分隔的多个css类名，则等价部分的代码是需要循环执行的
/* ********** 分割线 ********** */
$element.toggleClass( className, true );
//相当于
$element.addClass( className );
/* ********** 分割线 ********** */
$element.toggleClass( className, false );
//相当于
$element.removeClass( className );
四、toggleClass实例
1、对添加和移除类进行切换
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style>
.main
{
font-size:120%;
color:red;
}
</style>
<p>This is a paragraph.</p>
<p class="main">This is another paragraph.</p>
<button>Toggle class "main" for p elements</button>
$(document).ready(
2、使用函数切换类
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").toggleClass(function(n){
return "listitem_" + n;
});
});
});
</script>
<style>
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
<h1>This is a heading</h1>
<ul>
<li>Peter</li>
<li>Lois</li>
<li>Chris</li>
<li>Stewie</li>
</ul>
<button>Add/remove classes to list items</button>
3、使用 switch 参数
<script>
$(document).ready(function(){
$("#add").click(function(){
$("p").toggleClass("main",true);
});
$("#remove").click(function(){
$("p").toggleClass("main",false);
});
});
</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 id="add">Add class "main"</button>
<button id="remove">Remove class "main"</button>