如何在 jQuery 中添加和删除多个类？

在jQuery中，可以方便地添加或删除多个类。通过使用.addClass()和.removeClass()函数，我们可以一次添加或删除多个类。本文将介绍如何在jQuery中添加和删除多个类。

添加多个类

通过使用.addClass()函数，可以一次添加多个类到一个或多个元素。

语法：

$(selector).addClass(class1 class2 ... classN);

其中，selector是jQuery选择器，class1 class2 ... classN是要添加的类名称，用空格隔开。这里是一个例子：

$(document).ready(function(){
  $("button").click(function(){
    $("p").addClass("blue bold");
  });
});

这段代码会给所有<p>元素添加blue和bold两个类。可以在HTML文件中添加样式来验证是否成功添加了这些类：

<style>
.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}
</style>

...

<p>This paragraph has no class.</p>
<p>This paragraph has no class either.</p>

...

<button>Add Classes</button>

当我们点击“Add Classes”按钮后，两个段落会变成蓝色并加粗。

删除多个类

通过使用.removeClass()函数，可以一次删除多个类。

语法：

$(selector).removeClass(class1 class2 ... classN);

其中，selector是jQuery选择器，class1 class2 ... classN是要删除的类名称，用空格隔开。这里是一个例子：

$(document).ready(function(){
  $("button").click(function(){
    $("p").removeClass("blue bold");
  });
});

这段代码会从所有<p>元素中删除blue和bold两个类。可以在HTML文件中添加样式并再次验证：

<style>
.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}
</style>

...

<p class="blue bold">This paragraph has two classes.</p>
<p class="blue">This paragraph has one class.</p>

...

<button>Remove Classes</button>

当我们点击“Remove Classes”按钮后，两个段落会失去蓝色和加粗。

添加和删除多个类

通过使用.toggleClass()函数，可以一次添加或删除多个类。

语法：

$(selector).toggleClass(class1 class2 ... classN);

其中，selector是jQuery选择器，class1 class2 ... classN是要切换的类名称，用空格隔开。这里是一个例子：

$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("blue bold");
  });
});

这段代码会将所有<p>元素的blue和bold类切换。可以在HTML文件中添加样式并再次验证：

<style>
.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}
</style>

...

<p>This paragraph has no class.</p>
<p class="blue">This paragraph is blue.</p>
<p class="bold">This paragraph is bold.</p>
<p class="blue bold">This paragraph is blue and bold.</p>

...

<button>Toggle Classes</button>

当我们点击“Toggle Classes”按钮时，第一段段落不会有变化，而另外三个段落会交替变为蓝色、加粗、蓝色和加粗。

以上就是如何在jQuery中添加和删除多个类的方法。代码片段如下所示：

```javascript
$(document).ready(function(){
  $("button").click(function(){
    $("p").addClass("blue bold");
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $("p").removeClass("blue bold");
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("blue bold");
  });
});
```