2020/6/12こんにちは!ニタマサ=NewM(@NewM07x2)です。今回はjQueryを用いて要素にclassを追加・削除する方法をご紹介します。利用ケースとしてはアコーディオンのようなボタン押下時の動的な変化を出したい時に使用していきます。本記事では構文→コードの紹介→解説のステップで進めていきます。していく環境は以下の通りになっています。※2020/06時点ファイルの作成まずは簡単にHTMLでコードを作成して、外部ファイルでjsファイルを読み込ませていきましょう。コードは以下になります。CodePen.これで準備ができたので、次はいよいよjQuery.jsファイルの中でクラス名を追加・削除していきます。※jQuery.jsは初期段階では空白のままになっています。先ほど作成したjsファイル内に以下のようにコードを追加していきます。CodePen.これで”addclass”クラスが追加されています。画像で表示すると以下のようになっています。解説$(“element“)の書き方なのですが、JavaScriptと違って簡単に書くことができます。取得した要素に対して、追加したいクラス名を指定してaddClassメソッドを実行します。今度は以下のようにコードを追加していきます。CodePen.これで”test”クラスが削除されます。削除については追加の時とほぼ変わりません。削除の場合は削除したいクラス名を指定してremoveClassメソッドを実行します。これはクラスを削除するといった意味となります。ブラウザ上で確認してみると以下のように削除されています。おまけクラスがない状態であれば追加、あれば削除するといった状況の時にはtoggleClassメソッドを利用していきます。詳細は以下になります。構文$(“element“).toggleClass(“classNameValue“);element:クラス名を追加したい要素classNameValue:追加するクラス名コードの紹介toggleClassメソッドは以下のようにコードを追加していきます。CodePen.toggleClassメソッドは追加・削除をまとめてどちらか一方の操作を行いたい時に使用していきます。1つのボタンで、クラス名の追加・削除を行いたい時などで利用していきます。まとめいかがだったでしょうか。今回はjQueryを用いてクラスの追加・削除についてご紹介してきました。【初心者必見】Vue.jsとは?特徴やメリット、注意点をわかりやすく解説します。Vue.jsとは?特徴やメリット、注意点をわかりやすく解説します。null”ってなに?エンジニアなのにブラインドタッチができません。Reserved.この記事をシェアする。