【jQuery】複数クラスを追加・削除・切り替える

jQueryで指定した要素のclassを複数まとめて追加・削除・切り替えする方法を紹介します。jQueryを使わずにJavaScriptで実装したい方は、「【JavaScript】複数クラスを追加・削除・切り替える」をご覧ください。

jQueryで複数のクラスを追加する

jQueryで複数のクラスを追加する場合は、addClass メソッドを使い、スペース区切りでクラスを複数指定していきます。以下のソースコードはサンプルです。

$elm.addClass("first-class second-class third-class");

jQueryで複数のクラスを削除する

jQueryで複数のクラスを削除する場合は、removeClass メソッドを使い、スペース区切りでクラスを複数指定していきます。以下のソースコードはサンプルです。

$elm.removeClass("first-class second-class third-class");

jQueryで複数のクラスを切り替える

jQueryで複数のクラスをまとめて切り替える場合は、toggleClass メソッドを使い、スペース区切りでクラスを複数指定していきます。以下のソースコードはサンプルです。

$elm.toggleClass("first-class second-class third-class");

jQueryを使わずにJavaScriptで実装する方法

jQueryを使わずにJavascriptで実装する方法に関してはこちらの記事でご確認いただけます。

2021年7月14日【JavaScript】複数クラスを追加・削除・切り替える