ASP.NET JavaScript jQuery プログラミング

【 jQuery 】hasClass メソッドの使用方法 / 条件分岐の方法

今回は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)
}

おすすめ記事はコチラ

スマレジ テックファーム 1

スマレジ テックファーム で Webエンジニアとして勤めている tomoです。 今回は株式会社スマレジや私が所属している 「 スマレジ テックファーム 」についてPRしていきたいと思います。 スマレジ ...

2

FromBody 属性を使用して、 ASP.NET Core(.NET 6)のWebAPIでBodyパラメータのJSONを受け取る方法を解説します。 FromBody 属性 POSTやGETで呼び出さ ...

PC picture 3

ASP.NET Core(.NET 6)でCookie認証のタイムアウトを設定する方法を解説します。 Cookieの有効期限について Cookieには通常はタイムアウト(有効期限)を設定します。 基本 ...

4

ASP.NET Core(.NET 6)でクロスオリジンリクエスト ( CORS )を設定する方法を解説します。 簡単に クロスオリジンリクエスト ( CORS )とは何かについても少し解説したいと思 ...

-ASP.NET, JavaScript, jQuery, プログラミング
-, ,