【jQuery初心者向け】クリックした要素の背景色や文字色をtoggleClassメソッドで変更する方法

【jQuery初心者向け】クリックした要素の背景色や文字色をtoggleClassメソッドで変更する方法

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • クリックしたボタンの背景色や文字色を変更する方法が知りたい
  • jQueryのtoggleClassメソッドを使ってみたい
  • クリックに応じてCSSのクラスをつけたり外したりするにはどうしたらいいの…?

という方のお悩みを解決します!

この記事で紹介する「toggleClassメソッドでクラスを付けかえる方法」を実践すれば、jQueryの超基本スキルが身につきます。

それでは見て参りましょう〜!

toggleClassメソッドとは?

toggleClassメソッドとは、引数に指定したクラスを該当の要素が持っている場合はそのクラスを取り除き、持っていない場合は逆につけ加えてくれるjQueryのメソッドです。

以下のように使用します。

toggleClassの使い方
$('要素名').toggleClass('クラス名');

クリックした要素の色を変更する方法

上述したtoggleClassメソッドを駆使してクリックした要素の背景色と文字色を変更します。

ポイントは以下の2つ。

  • 要素がクリックされたらtoggleClassでisActiveクラスのつけ外しを行う
  • isActiveクラスには変更後の背景色と文字色を書いておく

それではHTML、CSS、jQueryの順でサンプルコードを確認しましょう。

HTML

HTML
<div class="Item">クリック!</div>

CSS

CSS
.Item{
  border-radius: 8px;
  padding-top: 16px;
  padding-bottom: 16px;
  width: 160px;
  text-align: center;
  background: #5bc8ac;
  color: #fff;
  cursor: pointer;
}
.Item.isActive{
  background: linear-gradient(45deg,#bdb9ff,#67b8ff);
  color: #000;
}

jQuery

jQuery
$('.Item').on('click', function(){
  $(this).toggleClass('isActive');
})

サンプル

See the Pen
mdJKWVE
by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

toggleClassメソッドを使用すればスマートにクラスのつけ外しが実装できます。

しかし、シチェーションによってはaddClassメソッドやremoveClassメソッドじゃないと実装できない場合も出てきます。

仕様に応じて臨機応変にクラスつけ外し実装をお楽しみください。

「jQueryでの実装例をもっともっと知りたい」

という方は以下の記事にも目を通してみてください〜!

一定量スクロールしたら表示されるボタンを作る方法一定量スクロールしたら表示されるボタンを作る方法【jQuery、CSS】 jQueryでフッター手前で止まるボタンの実装方法【jQuery】フッター手前で止まるボタンの実装方法