如何在 jQuery 中新增和刪除多個類？

我們可以使用 jQuery 的 `.addClass()` 方法向元素新增多個類。我們只需要將用空格分隔的類名字串作為引數傳遞即可。要刪除多個類，我們使用 `.removeClass()` 方法並傳入相同的類名字串。這兩種方法可以一起鏈式呼叫，以一次性新增和刪除多個類。

但在繼續之前，讓我們先看看 jQuery 提供了什麼，以及它如何使 Web 程式設計比普通的 JavaScript 更輕鬆。

什麼是 jQuery？

  • jQuery 是一個 JavaScript 庫，它簡化了操作和遍歷 HTML 和 CSS 的過程。

  • 它允許開發人員使用簡單的語法輕鬆地選擇、操作和更改網頁的內容。

  • jQuery 還提供了一系列內建方法和事件來處理常見的任務，例如表單驗證、動畫和 AJAX 呼叫。

  • 它與所有現代瀏覽器相容，並且廣泛用於 Web 開發。

  • jQuery 是開源的，並且擁有龐大的社群支援，因此很容易找到任何問題的解決方案和教程。

方法

現在讓我們探索新增和刪除多個類的方法：

  • 要在 jQuery 中新增多個類，請使用 "addClass" 方法並傳入用空格分隔的類名字串：

$(selector).addClass('class1 class2 class3');

  • 要在 jQuery 中刪除多個類，請使用 "removeClass" 方法並傳入用空格分隔的類名字串：

$(selector).removeClass('class1 class2 class3');

  • 或者，您還可以使用 "toggleClass" 方法一次新增或刪除多個類：

$(selector).toggleClass('class1 class2 class3');

如果這些類不存在，則會新增它們；如果存在於選定元素上，則會刪除它們。

注意：在以上所有方法中，“選擇器”應該是您要從中新增/刪除類的元素的 jQuery 選擇器。

示例

這是一個使用 toggleClass 方法在 jQuery 中新增或刪除多個類的完整工作示例：

<!DOCTYPE html>
<html>
<head>
   <title>Toggle Class</title>
   <style>
      .red {
         color: red;
      }
      .bold {
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div id="myDiv">Hello World</div>
      <button id="toggleBtn">Toggle Classes</button>
   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
   <script>
      $(document).ready(function() {
         $('#toggleBtn').click(function() {
            $('#myDiv').toggleClass('red bold');
         });
      });
   </script>
</body>
</html>

現在，單擊按鈕將在 "myDiv" 元素上切換 "red" 和 "bold" 類，導致文字在每次單擊時更改顏色和字型粗細。

您也可以以同樣的方式使用 addClass 和 removeClass 方法。在這種情況下，您需要分別呼叫這兩種方法來新增/刪除類。

更新於：2023年2月6日

9K+ 瀏覽量

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告