【jQuery】クリックでclassを追加・削除する

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

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

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

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

本記事の内容

jQueryを読み込む
クリックイベントを取得する
classを追加・削除するメソッド

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

jQueryを読み込む

本記事ではjQueryを使用してクリックによるclassの追加・削除の処理を実装していきます。jQueryを使用するため、予めjQuery本体のファイルを読み込んでおく必要があります。

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

jQuery本体は下記の記述で読み込むことができます。設置する場所についてはお好きな行で構いません。jQueryのスクリプトは本体を読み込んでいないと動かないので、スクリプトより上の行でjQuery本体を読み込むように注意していただければ大丈夫です。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  //ここに処理を記述する
</script>

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

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

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

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

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

試しに「button」というclassを持った要素のクリックイベントを取得して、アラートを表示します。

HTML

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

JS

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('.button').on('click', function(){
    alert('クリックイベントが取得できていれば表示されます。');
});
</script>

下記はサンプルのデモになります。「Click Me!」と記載されたボタンをクリックしてみてください。

See the Pen
Click addClass | jQuery by ryohei (@intotheprogram)
on CodePen.

ボタンをクリックすると「[merker]クリックイベントが取得できていれば表示されます。[/marker]」というアラートが表示されます。もし表示されない場合はスクリプトを見直してみましょう。

これでクリックイベントが取得できますので、続いて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;
}

JS

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('.button').on('click', function () {
    $('.button').addClass('one');
});
</script>

下記は上でご紹介したサンプルのデモになります。

See the Pen
Click Class2 | jQuery by ryohei (@intotheprogram)
on CodePen.

ボタンや背景に別途スタイルを定義していますが、「Click Me!」と書かれたボタンをクリックすると、「one」のclassが追加され、文字が赤色になります。addClassでoneのclassがbuttonに追加されたため、スタイルが適用されたため、文字が赤色に変更されます。

以上がaddClass()の使い方です。

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

removeClass()

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

$(selector).removeClass(className);

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

試しに一つサンプルを書いてみます。

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

HTML

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

CSS

.one{
  color: red;
}

JS

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('.button').on('click', function () {
    $('.button').removeClass('one');
});
</script>

下記は上でご紹介したサンプルのデモになります。

See the Pen
Click Class3 | jQuery by ryohei (@intotheprogram)
on CodePen.

「Click Me!」と書かれたボタンをクリックすると、「one」のclassが削除され、文字が白色になります。「one」が削除されたことにより、スタイルが外れたため文字の色が変わります。

サンプルでは「one」だけを削除しましたが、複数のクラスをまとめて削除することも可能です。その場合は半角スペースを空けて連続して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;
}

下記はサンプルのデモになります。

JS

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('.button').on('click', function () {
    $('.button').toggleClass('one');
});
</script>

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

See the Pen
Click Class4 | jQuery by ryohei (@intotheprogram)
on CodePen.

以上がtoggleClass()の使い方にります。