こんにちは、ryohei（@ityryohei）です！

本記事では、jQueryで特定の要素がクリックされた際に指定したclassを追加・削除する方法のご紹介しています。

Webサイトを制作する中で、何らかの要素がクリックされたら特定の処理を実行するというのは定番の処理です。フォームであれば選択されたラジオボタンやチェックボックスの値を取得して表示を切り替えたり、ナビゲーションであればボタンが押されたらサイドメニューを開くなど、クリックから始まる処理は数多く存在します。

本記事でご紹介するのは、クリックから始まる処理の中でも頻繁に使用するclassの追加・削除（付け外し）です。具体的には、ある要素がクリックされたら指定した要素にclassを追加あるいは削除するという処理になります。classの追加・削除は様々な場面で使用することができる汎用的なスクリプトですので、ぜひ覚えていただければと思います。

では、解説していきます。

jQueryを読み込む

jQueryを使用するため、予めjQueryの本体ファイルを読み込みます。ダウンロードして読み込む方法が一般的ですが、ここではCDNを利用してjQueryを読み込む方法をご紹介したいと思います。CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスです。ネットワークに接続されている機器であれば利用することができます。

jQueryの本体ファイルは下記のタグで読み込むことができます。設置する場所についてはお好きな行で構いません。jQueryのスクリプトは本体を読み込んでいないと動かないので、以降でご紹介するスクリプトより前の行でjQueryの本体ファイルを読み込むようにしてください。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

これでjQueryを使用する準備が整いました。続いてクリックイベントを取得してclassの追加・削除する方法を解説していきます。

クリックイベントを取得する

クリックイベントは下記の記述で取得することができます。

$(selector).on('click', function(){
    //ここに処理を記述する内容
});

上記ではselectorに指定した要素がクリックされた際に{}内の処理を実行します。

例として、buttonというclassを持った要素のクリックイベントを取得して、アラートを表示するスクリプトを作成してみます。

HTML

<button class="button">Click Me!</button>

jQuery

$('.button').on('click', function(){
    alert('クリックイベントが取得できていれば表示されます。');
});

下記は上記を実行した際のデモです。Click Me!と記載されたボタンをクリックするとアラートが表示されます。もし表示されない場合はスクリプトを見直してみましょう。

See the Pen 1278-1 by ryohei (@intotheprogram) on CodePen.

これでクリックイベントが取得できました。続いてclassの追加・削除方法について解説していきます。

classを追加・削除するメソッド

jQueryにはclassを追加・削除することができるメソッドが予め用意されています。下記リストに記載の3つのメソッドになります。

  • addClass()
  • removeClass()
  • toggleClass()

一つずつ詳しく見ていきましょう。

addClass()

addClass()は指定した要素にclassを追加することができるメソッドです。指定方法は簡単で、下記のように記述するだけでclassを追加することができます。

$(selector).addClass(className);

上記の例ではselectorの要素に対して、addClass()の引数に指定したclassNameというclassを追加しています。

試しに一つサンプルを書いてみます。buttonのclassを持っている要素がクリックされたらoneというclassを追加してみます。classが追加されたことが視覚的にわかるようにoneには文字色を赤にするスタイルを定義しておきます。

HTML

<button class="button">Click Me!</button>

CSS

.one{
  color: red;
}

jQuery

$('.button').on('click', function () {
    $('.button').addClass('one');
});

下記は作成したスクリプトのデモになります。Click Me!と書かれたボタンをクリックすると、oneのclassが追加され、文字が赤色になります。addClass()によってbuttonにoneのclassが追加されたため、スタイルが適用され、文色が上書きされます。

See the Pen 1278-2 by ryohei (@intotheprogram) on CodePen.

以上がaddClass()の使い方です。続いて指定した要素のclassを削除するremoveClass()のメソッドについて解説していきます。

removeClass()

removeClass()は指定した要素からclassを削除するメソッドです。下記のように記述することで要素からclassを削除することができます。

$(selector).removeClass(className);

上記の例ではselectorの要素からremoveClass()の引数に指定したclassNameを削除することができます。

試しに一つサンプルを書いてみます。前項で作成したサンプルを再利用して、予めbuttonにoneというclassを持たせておき、removeClass()でoneのclassだけを削除してみます。

HTML

<button class="button one">Click Me!</button>

CSS

.one{
  color: red;
}

jQuery

$('.button').on('click', function () {
    $('.button').removeClass('one');
});

下記は作成したスクリプトのデモになります。Click Me!と書かれたボタンをクリックすると、oneのclassが削除され、文字が白色に変わります。oneが削除されたことにより、スタイルが外れたため文字の色が変わります。

See the Pen 1278-3 by ryohei (@intotheprogram) on CodePen.

サンプルではoneのclassだけを削除しましたが、複数のクラスをまとめて削除することも可能です。その場合は半角スペースを空けて連続してclassを引数に指定します。

$('.button').removeClass('one two three four five');

以上がremoveClass()の基本的な使い方です。続いてaddClass()とremoveClass()の機能を備えたtoggleClass()について解説していきます。

toggleClass()

toggleClass()はclassの追加・削除を交互に実行するメソッドです。要素に指定したクラスが既に存在した場合は削除し、なければ追加するといった処理になります。

指定方法は簡単です。addClass()やremoveClass()と同様に記述します。

$(selector).toggleClass(className);

selectorがclassNameに指定したclassを持っていれば削除し、なければ追加します。

試しに一つサンプルを書いてみます。buttonのclassを持っている要素にoneというclassを追加あるいは削除します。上記と同様にoneというclassには文字色を赤くするスタイルを定義しています。クリックする度に文字色が変わることが確認できると思います。

HTML

<button class="button">Click Me!</button>

CSS

.one{
  color: red;
}

jQuery

$('.button').on('click', function () {
    $('.button').toggleClass('one');
});

下記は作成したスクリプトのデモになります。「Click Me!」と記載されたボタンをクリックする度に文字の色が赤色と白色に変わることが確認できると思います。toggleClass()によってclassの追加・削除が実行されているからですね。

See the Pen 1278-4 by ryohei (@intotheprogram) on CodePen.

以上がtoggleClass()の基本的にあ使い方になります。

まとめ

最後に本記事でご紹介したメソッドのリファレンスをご紹介します。より詳しく知りたい方は下記のURLをご参照いただければと思います。

addClass()https://api.jquery.com/addClass/
removeClass()https://api.jquery.com/removeClass/
toggleClass()https://api.jquery.com/toggleClass/

Web制作をする上でクリックイベントを取得して何か処理をする機会は多くあると思いますので、似たような処理を記述される場合は本記事の内容を思い出していただければ幸いです。

以上、jQueryで特定の要素がクリックされた際に指定したclassを追加・削除する方法のご紹介でした！