jQuery のクラスを切り替えます

今日の記事では、jQuery の toggle クラスについて説明します。

jQuery のクラスを切り替えます

jQuery は、組み込みのクラス toggle メソッドを提供します。このイベントは、クラスの存在またはステータス引数の値に基づいて、一致する要素のセット内の各要素に 1つ以上のクラスを追加または削除します。

構文：

.toggleClass( className )
.toggleClass( classNames )

1. className は、一致したセット内の各要素を切り替えるための 1つ以上のクラス（スペースで区切られます）です。
2. classNames は、一致するセットの各要素を切り替えるクラスの配列です。

toggle メソッドは、1つ以上のクラスをパラメーターとして受け取ります。一致する要素セットの要素が最初のバージョンのクラスをすでに持っている場合、それは削除されます。

要素にクラスがない場合は、追加されます。たとえば、.toggleClass() を単純な <div> に適用できます。

.toggleClass() の 2 番目のモデルは、2 番目のパラメーターを使用して、クラスを追加または削除するかどうかを決定します。このパラメーターの値が 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 をサポートする任意のブラウザーで上記のコードを実行します。以下の結果が表示されます。

出力：

トグルの前：

トグル後：