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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

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

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

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

toggleClassメソッドとは？

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

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

$('要素名').toggleClass('クラス名');

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

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

ポイントは以下の2つ。

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

HTML

<div class="Item">クリック！</div>

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

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

サンプル

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

まとめ

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

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

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

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

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

一定量スクロールしたら表示されるボタンを作る方法【jQuery、CSS】

【jQuery】フッター手前で止まるボタンの実装方法