在 jQuery 中切換類

今天的文章將介紹 jQuery 中的 toggle 類。

在 jQuery 中切換類

jQuery 提供了一個內建的類 toggle 方法。此事件根據類的存在或狀態引數的值，從匹配元素集中的每個元素中新增或刪除一個或多個類。

語法：

.toggleClass( className )
.toggleClass( classNames )

1. className 是一個或多個類（由空格分隔），用於為匹配集中的每個元素切換。
2. classNames 是一個類陣列，為匹配集中的每個元素切換。

toggle 方法將一個或多個類作為引數。如果匹配元素集中的元素已經具有第一個版本中的類，則將其刪除。

如果一個元素沒有類，它將被新增。例如，我們可以將 .toggleClass() 應用於簡單的 <div>。

.toggleClass() 的第二個模型使用第二個引數來確定是否新增或消除類。如果此引數的值為 true，則新增該類；如果 false，則該類被淘汰。

如果沒有超過 .toggleClass() 的引數，則在第一次呼叫 .toggleClass() 時切換元素的所有類。

讓我們通過以下示例來理解它。

<p class="blue">Click on me to change color</p>

.blue {
    color: blue;
  }
.highlight {
    background: yellow;
}

$( "p" ).click(function() {
  $( this ).toggleClass( "highlight" );
});

上面的例子定義了一個帶有 blue 類的段落標籤。一旦使用者點選了段落，它將應用 .toggleClass("highlight") 到該段落。

在任何支援 jQuery 的瀏覽器中執行上述程式碼；它將在下面顯示結果。

輸出：

切換之前：

切換後：