【jQuery】特定のクラスがあるときに条件分岐をさせたいときはどうするのか？
クラスで条件分岐すると、効果のON・OFFの切り替えに便利
Webデザインをしていると、特定のクラス（class）を持つボタンを押した時にだけ、何か効果が現れるような動きを取り入れたいことが多々あります。
例えば、以下に掲載したリンクのように、リンクをクリックするたびに効果が切り替わるような動作をさせるとします。
このような切り替えをする場合は、ボタンに特定のクラスがあるかどうかを判定させると便利です。
コードの紹介
先ほどのコードは以下のようになっています。
HTML
<ul>
<li><a href="#" class="button">このリンクを押してね</a></li>
</ul>
jQuery
$("a.button").click(function(){
if($(this).hasClass("red")){ //redのクラスがあるかどうかを判定
$("a.button").css("color","black");
$("a.button").removeClass("red");
return false;
} else {
$("a.button").css("color","red");
$("a.button").addClass("red");
return false;
}
});
このjQueryの内容を解説すると、"button"というクラスがついたaタグをクリックした際に、そのタグが"red"というクラスを持っているかどうかを判定し、持っていたらテキストの色を黒にして"red"のクラスを無くし、"red"というクラスがなかったら、テキストを赤にして"red"のクラスを付与します。
jQueryで特定のクラスがあるかどうかを判定する
上記のjQueryのコード中、特定のクラスがあるかどうかを判定しているのは、以下の一文です。
if($(this).hasClass("red")){ //redのクラスがあるかどうかを判定
hasClassというメソッドは、if文と組み合わせることによって、（）内のクラスがあるかどうかを判定することができます。
この手法を利用し、条件分岐をすることによって、さまざまな動きをWebサイトにつけることができます。