jQueryでセレクタがクラスを持つ・持たないで条件分岐する方法/hasClassメソッドの使い方

jQueryでCSSを直接いじることもできますが、ある程度まとめて見た目を変更したい場合にはやはりクラスなどの付け替えが簡単です。「特定のクラスがセレクタに付いているかどうか」を判別できるhasClassメソッドを使えば、クリックするたびにクラスを付けたり外したりする処理を実装することも簡単にできます。

hasClassメソッドの使い方

判別するメソッドなので、戻り値はtrueかfalseのどちらかになります。クラスが付いていればtrueです。

対象クラスが付いているか判別
$(‘セレクタ’).hasClass(‘対象クラス名’);

たとえば下のボタンには最初のものにだけ「check」クラスを付けています。まずはこれに対してhasClassメソッドを実行して、判定結果を出力してみました。
Click me!
Click me!
判定結果：

<a class = "check test">Click me!</a>
<a class = "test">Click me!</a>

//jQuery
$(".test").click(function() {
let $class = $(this).hasClass('check');
$('#test-output').text($class);
});

クラスがある場合はtrue、ない場合はfalseが返されることが確認できました。従って、上の例で言えば変数$classを条件に組み込んでif文を書けば、ボタンをクリックするたびにクラスを付け外しするプログラムが書けることになります。
Click me!

$(".test2").click(function() {
if($(this).hasClass('check')){
//checkクラスを外す
$(this).removeClass('check');
$('#test-output2').text('クラスがONの時の処理');
}else{
//checkクラスを付ける
$(this).addClass('check');
$('#test-output2').text('クラスがOFFの時の処理');
}});

hasClassメソッドを使った条件分岐については以上です。