Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
188
Help us understand the problem. What is going on with this article?
@Scheme

jQuery classの追加・削除

More than 1 year has passed since last update.

クラス操作いろいろ

スタイルを変えたいとかそういった理由でクラスを追加したり削除したりといじりたくなる機会がある。
参考: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");
});

スッキリ。

188
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Scheme
gauss
株式会社GAUSSは、AIソフトウェアを組み込んだサーバの提供、AIサービス構築のコンサルティング、AIのエンジニア育成をセットにしてサービス提供を展開するスタートアップ企業です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
188
Help us understand the problem. What is going on with this article?