jQuery toggleClass 条件 - Javascript

在使用 jQuery 的情况下，toggleClass() 方法可以方便地将一个元素的 class 属性加上或移除。当然，我们还可以添加条件来控制 toggleClass() 方法的行为。

语法

$(selector).toggleClass(className, switch);

参数

• className：必需。用于指定将要加入或移除的 class 名称。
• switch：可选。一个布尔值，表示是否强制添加或移除 class。默认是 false，表示 toggleClass() 方法会根据元素的当前 class 属性来确定是否添加或移除 className。

例子

$("button").click(function(){
  $("p").toggleClass("red");
});

// 在切换class之前检查是否有另一个class，如果有则删除它
$("button").click(function(){
  $("p").toggleClass("red", !$("p").hasClass("blue"));
});

在上面的例子中，我们可以看到：

1. 当点击 button 元素时，p 元素的 red class 将会被添加或移除。
2. 当点击 button 元素时，p 元素的 red class 将会被添加或移除，但仅当它目前没有 blue class。

以上就是 jQuery toggleClass() 方法带条件的使用示例。

返回markdown格式

jQuery toggleClass 条件 - Javascript

在使用 jQuery 的情况下，toggleClass() 方法可以方便地将一个元素的 class 属性加上或移除。当然，我们还可以添加条件来控制 toggleClass() 方法的行为。

语法

$(selector).toggleClass(className, switch);

参数

| 参数名 | 描述 | | :----- | :---------------------------------------------------- | | className | 必需。用于指定将要加入或移除的 class 名称。 | | switch | 可选。一个布尔值，表示是否强制添加或移除 class。默认是 false，表示 toggleClass() 方法会根据元素的当前 class 属性来确定是否添加或移除 className。 |

例子

$("button").click(function(){
  $("p").toggleClass("red");
});

/*
在切换class之前检查是否有另一个class，如果有则删除它
*/
$("button").click(function(){
  $("p").toggleClass("red", !$("p").hasClass("blue"));
});

在上面的例子中，我们可以看到：

1. 当点击 button 元素时，p 元素的 red class 将会被添加或移除。
2. 当点击 button 元素时，p 元素的 red class 将会被添加或移除，但仅当它目前没有 blue class。