こんにちは、webエンジニア歴4年のtakaです。
この記事では特定のclassを持っているか持っていないかをjQueryで判定する方法を記載していきます。
特定のclassを持っているか判定方法
このようなHTMLがあります。
// HTML
<div class="wrapper main">
<p>メイン</p>
</div>
<div class="wrapper sub">
<p>サブ</p>
</div>特定のclassを持っているか判定するにはこのように記載します。
// JavaScript
if ($(".wrapper").hasClass("main")) {
// wrapperクラスを持つhtmlタグがmainクラスがある場合の処理
} else {
// wrapperクラスを持つhtmlタグがmainクラスがない場合の処理
}hasClassメソッドに記載する値は、クラス名なのでドットはいりません。注意してください。
× hasClass(“.main”)
○ hasClass(“main”)
aタグやbuttonで利用したい場合
このようなHTMLがある場合も
// HTML
<ul>
<li><a href="・・・" class="link linkA">リンクA</a></li>
<li><a href="・・・" class="link">リンクB</a></li>
<li><a href="・・・" class="link">リンクC</a></li>
</ul>同様にhasClassを利用できます。
// JavaScript
$(document).on("click",".link", function() { // linkというclassをクリックしたら
if ($(this).hasClass("linkA")) { // この場合thisはクリックしたaタグ
// linkAクラスを持つaタグがクリックされた時の処理
} else {
// linkAクラスを持つaタグ以外（リンクB・リンクC）がクリックされた時の処理
}
});tips!
onメソッドの最後にreturn: false;を記載すると、href属性に入力したページに遷移しなくなるよ。
// JavaScript
$(document).on("click",".link", function() {
if ($(this).hasClass("linkA")) {
} else {
}
return: false; // これを追加！
});