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

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

トグルって便利ー

いろいろな使いかたができるので柔軟に対応しましょう
関連記事
おすすめ
かんれん
- web / 2019.2.20
- 【CSS】IE11だけ表示崩れしたときのCSSハック
- web / 2020.10.27
- 【CSS】tableをレスポンシブ対応する、2列を1列に切り替える
- web / 2018.9.3
- 【CSS】セレクタまとめ、最初・最後・奇数・偶数・何番目
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.09.29New
- センダイパルコ15th | 仙台PARCO
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。