【jQuery】class（クラス）の追加と削除

jQueryを使えば、class（クラス）の追加も削除も簡単にできます。

どんなときに使いますか？

ボタンを押してスタイルを変えたい時とか便利ですよー

『addClass』class（クラス）の追加

指定の要素に『one』というクラスを追加する。

$("要素").addClass("one");

『removeClass』class（クラス）の削除

指定の要素から『one』というクラスを削除する。

$("要素").removeClass("one");

『addClass、removeClass』を使って、class（クラス）がなかったら追加、あったら削除

$("要素").click(function(){ // 要素をクリックして
  if($(this).hasClass("one")){ // クリックされた要素が『one』というクラスを持っているなら
    $(this).removeClass("one"); // 『one』というクラスを削除する
  }else{ // クリックされた要素が『one』というクラスを持ってなかったら
    $(this).addClass("one"); // 『one』というクラスを追加する
  }
});

説明文を除くと、

$("要素").click(function(){
  if($(this).hasClass("one")){
    $(this).removeClass("one");
  }else{
    $(this).addClass("one");
  }
});

『toggleClass』だけで、class（クラス）がなかったら追加、あったら削除

『toggleClass』を使うとシンプルです。
toggle（ トグル ）は 「 同一の操作で二つの状態を交互に切り換えること 」を意味しています。

$("要素").click(function(){ // 要素をクリックして
  $(this).toggleClass("one"); // 『one』というクラスがなかったら追加、あったら削除
});

説明文を除くと、

$("要素").click(function(){
  $(this).toggleClass("one");
});

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery（英語版）

さいごに

トグルって便利ー

いろいろな使いかたができるので柔軟に対応しましょう

関連記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）