Into the Program

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

Image

こんにちは、ryohei(@ityryohei)です!

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

Webサイトを制作する中で、何らかの要素がクリックされたら特定の処理を実行するスクリプトは高い頻度で記述することになります。フォームであれば選択されたラジオボタンやチェックボックスの値を取得して処理をしたり、ナビゲーションであればボタンが押されたらサイドメニューを開くなど様々です。

処理は色々とありますが、本記事でご紹介するのは「class」の追加・削除(付け外し)になります。ある要素がクリックされたら、指定した要素に任意の「class」を追加あるいは削除するという処理になります。「class」の追加・削除も割と使うことが多い印象です。

クリックイベントを取得して~をする、というのは様々な場面で汎用的に使用することができますので、ぜひ覚えていっていただければと思います!

本記事の内容

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

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

jQueryを読み込む

本記事ではjQueryを使用してクリックによるclassの追加・削除の処理を実装していきます。予めjQuery本体のファイルを読み込んでおきましょう。jQuery本体のソースをダウンロードする方法もありますが、ここではCDNを利用してjQueryを読み込む方法をご紹介したいと思います。

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

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  //ここに処理を記述する
</script>

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

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

クリックイベントの取得は以下のコードで行うことができます。
以下では、「selector」に指定した要素がクリックされた際に「{}」の内側の処理を行います。

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

試しに「button」というclass属性を持った要素のクリックイベントを取得して、アラートを表示してみます。コピペでも動くかと思いますが、環境がある場合はせっかくですのでコードを入力してみてくださいね。

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

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

デモを見る

「クリックイベントが取得できていれば表示されます。」のアラートがブラウザ上に表示されたと思います。
これでクリックイベントが制御できるようになりました。
次はclassの追加方法について解説します。

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

addClass()

addClassは指定した要素にclassを追加することができます。
以下の方法で記述します。例ではEの要素にaddClass()の中に記述したCのclassを追加します。

$(E).addClass(C);

試しにbuttonのclassを持っている要素がクリックされた場合にoneという別のclassを追加してみます。わかりやすいようにoneというclassに文字色を指定するスタイルを定義しておきます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.button').click(function () {
    $('.button').addClass('one');
  });
});
</script>
<style>
.one{
  color: red;
}
</style>

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

Demo

Buttonをクリックすると文字色が赤に変わったと思います。クリックイベントが発生した際にaddClassによってoneというclassが追加され、oneのスタイルが適用されたためです。
動きが掴めてきた思いますので、次は指定した要素のclassを削除してみましょう。

removeClass()

removeClassは指定した要素からclassを削除します。
以下のように記述します。Eの要素が持っているCというclassを削除します。

$(E).removeClass(C);

試しにコードを記述してみましょう。今回はbuttonとoneというclassを持っている要素からoneのclassだけを削除します。上記と同様にoneには文字色を変更するスタイルが定義されています。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.button').click(function () {
    $('.button').removeClass('one');
  });
});
</script>
<style>
.one{
  color: red;
}
</style>

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

Demo

Buttonをクリックすると文字色が赤から白に変わったと思います。oneのclassが削除されたことによりoneに定義されていたスタイルが外れたからですね。
ちなみに複数のクラスをまとめて削除することも可能です。その場合は、半角スペースを空けて連続してclassを指定します。

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

toggleClass()

toggleClassは指定したクラスが既に存在した場合は削除し、なければ追加することができます。
以下のように記述します。Eの要素がCというclassを持っていれば削除し、持っていなければ追加します。

$(E).toggleClass(C);

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.button').click(function () {
    $('.button').toggleClass('one');
  });
});
</script>
<style>
.one{
  color: red;
}
</style>

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

まとめ

Demo

Web制作をする上でクリックイベントを取得して何か処理をする機会は多くあると思いますので、これを機に覚えていただければ幸いです。

SHARE