jQuery classの追加・削除

#クラス操作いろいろ

スタイルを変えたいとかそういった理由でクラスを追加したり削除したりといじりたくなる機会がある。
参考：jQuery日本語リファレンス

##クラスの追加 addClass(class)

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

これで指定の要素にchangedクラスが追加される。

##クラスの削除 removeClass(class)

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

これで指定の要素からchangedクラスが削除される。

##クラスがなければ追加、あれば削除 toggleClass(class)

例えば、ある要素がクリックされたときに、clickedクラスがあればクラスを削除し、なければclickedクラスを追加する。という処理を想定すると、

addClass(class)とremoveClass(class)がわかった今なら、

$("要素").click(function(){
  if($(this).hasClass("clicked")){ // クリックされた要素がclickedクラスだったら
    $(this).removeClass("clicked");
  }else{
    $(this).addClass("clicked");
  }
});

という感じのコードが浮かぶかもしれない。自分は真っ先に浮かぶ。が、ここで、

$("要素").toggleClass("changed");

これだけでその要素にクラスがなければ追加し、あれば削除してくれる。つまり、

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

スッキリ。