jQuery便利なメソッドtoggleClassの使い方！etc

今回は、toggleClass()メソッド、addClass()メソッド、removeClass()メソッドにつきまして、サンプルコードを交え記載してみたいと思います。

前回開閉スライドするサイドバーにつきまして、記載いたしましたが、その中で少しふれましたtoggleClass()メソッド、addClass()メソッド、removeClass()メソッド、実はかなりシンプルで使いがっての良いメソッドです。しかしながら、色々と他のメソッドと並行して説明が記載されていると、シンプルですが分かりにくいと思いますので、今回はシンプルに分かりやすくtoggleClass()メソッド、addClass()メソッド、removeClass()メソッドにつきまして、記載してみようと思います。

という事で、それでは今回はッ、

・jQuery、toggleClass()メソッドの使い方
・jQuery、toggleClass()で複数のクラスの切り替え
・jQuery、addClass()メソッドのサンプル
・jQuery、removeClass()メソッドのサンプル

上記について記載していこうと思います…。

jQuery、toggleClass()メソッドの使い方

toggleClass()メソッドは、「引数に指定されたクラス名（文字列）が、jQueryオブジェクト内の要素のclass属性に指定されているかを確認し、指定されていない場合は追加し、すでに指定されている場合は削除するメソッド」です。

.toggleClass()の基本構文

toggleClass()の基本構文は、オブジェクト内の要素のclass属性に指定されているか、もしくは、指定されていないかを判断し切り替える役割があります。文章で説明するよりもサンプルコードを見たほうが理解しやすいと思いますので、下記に記述してみます。

$(“セレクタ”).toggleClass(“クラス名”);

上記が基本構文になりますが、これをさらに分かりやすく「元のHTML」と「メソッドの実行Script」と「メソッド実行後のHTML」に分けてサンプルコードを記載してみます。

メソッドの実行前と後サンプル

■元のHTML

toggleのテスト1です！
toggleのテスト2です！

■メソッドの実行Script

$(“#toggle1”).toggleClass(“test”)
$(“#toggle2”).toggleClass(“test”)

■メソッド実行後のHTML

toggleのテスト1です！
toggleのテスト2です！

jQuery、toggleClass()で複数のクラスの切り替え

tggleClass()は、便利なことに複数のクラスを切り替えることも可能です。それでは早速、複数クラスの指定方法基本構文を記載いたします。

$(“セレクタ”).toggleClass(“クラス名クラス名”);

上記が、複数のクラス名を一度に切り替える基本構文になります。「クラス名の間を半角スペースで区切る」ことで、一度に複数のクラス名を付け加えたり、また、クラス名を削除したりすることが可能になります。それではもう少し分かりやすいように、またサンプルコードを記述してみます。

メソッドの実行前と後サンプル

■元のHTML

toggleのテスト1です！
toggleのテスト2です！

■メソッドの実行Script

$(“#toggle1”).toggleClass(“test test2”)
$(“#toggle2”).toggleClass(“test test2”)

■メソッド実行後のHTML

toggleのテスト1です！
toggleのテスト2です！

非常に簡単ですね！！では、実際にクリックしたら、jQueryでクラスをつける、外すのコーディングサンプルも記述してみます。

サンプルscript$(function(){
$(“button”).on(“click”,function(){
$(“#toggle1,#toggle2”).toggleClass(“test test2”);
});
});

上記では初心者の方でも分かりやすいよう、複数のセレクタ指定に加えて、toggleClass()メソッドで、複数のクラス（testとtest2）を加えたり外したりする記述になります。実際のコーディングでは、このtoggleClassに加えanimation()メソッドを記述することになります。

jQuery、addClass()メソッドのサンプル

上記、toggleClass()メソッドが理解できてしまえば、addClass()メソッドは簡単で、assClass()メソッドは「引数の文字列（クラス名）をclass属性に追加するメソッド」になります。つまり、新たに要素に対してクラス属性を付け加えるメソッドになります。
分かりやすいよう、早速サンプルを記述します。

メソッドの実行前と後サンプル

■元のHTML

addのテストです！

■メソッドの実行Script

$(“#add”).addClass(“test”)

■メソッド実行後のHTML

addのテストです！

addClass()メソッドは、toggleClass()メソッドとは異なり、付け加えるだけのメソッドです。非常に簡単ですが、Webサイトの作成時、jQueryで動きや変化をつける場合、頻繁に記述するメソッドになります。

jQuery、removeClass()メソッドのサンプル

removeClass()メソッドは、addClass()メソッドと比べ全く反対に「引数の文字列（クラス名）をclass属性から削除するメソッド,」です。removeClass()、addClass()同様に、class属性が複数クラスになっても問題なく、removeClass()メソッドで説明した記述方法と同じ気zゅツ方法になります。それではまた、サンプルを記述します。

メソッドの実行前と後サンプル

■元のHTML

removeのテストです！

■メソッドの実行Script

$(“#remove”).removeClass(“remove test”)

■メソッド実行後のHTML

removeのテストです！

removeClass()メソッドは、addClass()メソッド同様、非常に簡単です。こちらもまた、Webサイトの作成時、jQueryで動きや変化をつける場合、頻繁に記述するメソッドになります。

ということで今回は、toggleClass()メソッド、addClass()メソッド、removeClass()メソッドにつきまして、サンプルコードを交え記載いたしました。

初心者の方でも比較的簡単な内容だったことと思います。jQueryのメソッドを覚えるスタートとしては、この辺りのメソッドが覚えやすいように思います。しかしながら、jQueryなどプログラム言語を独学で学ぼう！もしくはマスターしようと思うと、私の個人的な感覚といたしましても、最低でも1年！早くても半年ほどかかってしまうように思います。

独学で少しでも早くマスターしたいのであれば、「ブートキャンプ無料体験」や「CodeCampGATE」をおすすめいたします。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。