【jQuery】class(クラス)の追加と削除

【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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

さいごに

トグルって便利ですねー
いろいろな使いかたができるので柔軟に対応しましょうー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

7

/

27

2024

Googleさんの
おすすめ

7

/

27

2024

デザインの記事

劇場アニメ「ルックバック」
あたらしい生活まで
【jQuery】スライダープラグイン「slick」実装サンプル集