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

Image

jQueryでクリックイベントを取得して何か処理を行う機会は多いと思いますが、今回はクリックイベントを取得して指定した要素にクラスを追加または削除する方法をご紹介したいと思います。

jQueryを読み込む

GoogleのCDNを利用してjQueryを読み込みます。

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

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

クリックイベントの取得は以下のコードで行うことができます。

以下では、Eに指定した要素がクリックされた場合に内側の処理を行います。

$(E).click(function () {
  //処理内容
});

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

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

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

Demo

「クリックイベントが取得できていれば表示されます。」のアラートがブラウザ上に表示されたと思います。

これでクリックイベントが制御できるようになりました。

次は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