今回はjQueryのhasClassメソッドとは何か、そしてその使用方法について解説していきたいと思います。
また、ASP.NET環境下での便利な使用方法も解説したいと思います。
例えば、お気に入り機能があるECサイトがあって、
そのユーザが商品をお気に入り登録ボタンをクリックした時にポップアップが表示されるjQueryのイベントがあるとします。
hasClassメソッドとは
jQueryのメソッドには、「hasClass」というものがあります。
hasClassは、あるWebページの要素に対してメソッドの引数で指定したclassが存在するかを確認することができる便利なメソッドです。
指定したclassが存在した場合は真(true)、存在しない場合は偽(false)の真偽値を返します。
hasClassメソッドの使用方法
hasClassメソッドは以下のように使用することができます。
$('element').hasClass('className')
上記の場合、'element'に対象となる要素、'className'にelementに指定した要素に存在するか確認したいclass名を指定します。
また、もしclassを複数指定したい場合は、以下のようにclass名を半角スペースで区切って指定することで判定することができます。
$('element').hasClass('class1 class2 class3 class4')
hasClassメソッドを使用した条件分岐の方法
今回の記事の最初に解説した通り、hasClassメソッドは対象の要素に対して指定したclassが存在するかを判定して、
その結果を真偽値で返してくれるので、その存在するかの結果によって実行する処理を条件分岐させることができます。
実際にhasClassメソッドを使用した条件分岐の方法は以下になります。
if( $('element').hasClass('className') ) {
#classが存在する場合の処理を書く(返却値=true)
} else {
#classが存在しない場合の処理を書く(返却値=false)
}