jQueryでのif文の書き方(else,else ifなども)

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryでif文を使った条件分岐の書き方です。

else ifelseなどを併用したり、比較演算子などを使ってより複雑な条件分岐も簡単にできます。

if文を一行で簡単に書く方法も併せてご紹介します。

 

if文の基本的な使い方

単純なif文の使い方です。

条件に合致していれば、コンソールに県名を表示させます。

結果(コンソール)

福岡です。

上記のように表示されます。

 

コンソールについては下記ページでご紹介しています。

参考:jQueryでコンソールログを使ったデバッグ方法

if文の構文

if文は以下のような構文になります。

if (条件式) {
trueの場合の処理
}

条件式

if文の条件式で、分岐の条件を決めます。

ifに続く()(カッコ)内に条件式を書きます。

先ほどのサンプルでは、変数の値と指定した値が等しかったら…という条件式になっています。

このように左辺と右辺を比較し、等しかったら、等しくなかったら、大きかったら、小さかったらなど、さまざまな条件式を設定できます。

else で falseの処理も指定

先程はtrueの場合のみの処理でしたが、今度はfalseの処理も併せて指定してみましょう。

成人か未成年かを判定

結果(コンソール)

未成年です。

if文の最後の}(波カッコ)から続けてelseと書いて同様に指定するだけですね。

else if でさらに条件分岐

if文では条件式がfalseだった場合、さらに条件式を付けて3つも4つも分岐させるといった、より複雑な条件分岐もできます。

成人、未成年、シニアの判定

結果(コンソール)

シニアです。

else ifで2個め3個め…と複数の条件式を指定して、最後のelseでどれにも当てはまらないプログラムを書きます。

else ifelseifの間に半角スペースを開けてます。

elseifと繋げて書くとエラーになるので注意しましょう。

if文と併せて使う演算子たち

if文は2つの値を比較して大きい、小さい、等しいなどと判定したり、複数の AND、OR条件での分岐など、if文を補ってくれる演算子があります。

比較演算子(<=、==など)

条件式のカッコの中には比較する2つの値と、その間に比較演算子と呼ばれる記号が入っています。

比較演算子は左辺と右辺を比較して、多いか少ないか、以上・以下を判定する関係演算子と、等しいか、等しくないかを判定する等価演算子があります。

関係演算子一覧表

演算子サンプル説明
>a > bbよりaが大きい
>=a >= baはb以上
(bよりaが大きいか同じ)
<a < baよりbが大きい
<=a <= bbはa以上
(aよりbが大きいか同じ)

等価演算子一覧表

演算子サンプル説明
==a == baとbは同じ値
!=a != baとbは違う値
===a === baとbは同じ値
(型も含めた厳密な比較)
!==a !== baとbは違う値
(型も含めた厳密な比較)

論理演算子(AND、ORなど)

条件式のカッコの中に複数の条件を指定することもできます。

AND(&&)やOR(||)など、複数の条件に合致した場合にのみ表示させるなど、複雑な条件分岐が可能になります。

論理演算子一覧表

名前・タイプ演算子サンプル説明
論理積(AND)&&a && baとbが両方含まれる
論理和(OR)||a || baかbのどちらかが含まれる
否定!!aaではない

if文を使ったサンプル集

以上・以下(70点以上なら合格)

否定(男性じゃなければあいさつする)

AND(2ヶ月連続100万円なら連続達成)

OR(福岡か北九州なら福岡県と表示)

IDの判定(要素のIDが’text’だったらclassを追加)

classnoneにはあらかじめcssdisplay: noneを指定しておきます。

classnoneを要素に追加することで、要素自体が非表示になるサンプルです。

HTML&CSS

jQuery

 結果(HTML)

結果(ブラウザ)

<p>要素にclassnoneが追加され、非表示になります。

classの判定(要素にclass’none’が付いていたらclassを削除)

classnoneにはあらかじめcssdisplay: noneを指定しておき、そのclassが指定された<p>要素は非表示になっています。

classnoneを要素から削除することで、要素自体が表示されるサンプルです。

HTML&CSS

jQuery

 結果(HTML)

結果(ブラウザ)

<p>要素からclassnoneが削除され、要素が表示されます。

参考:removeClass() でclassを削除する

if文を一行で記述

単純なif文であれば、1行で処理できます。

結果(コンソール)

福岡です。

{}(波カッコ)を省略し、改行せずに1行で記述しています。

elseがない単純なif文であればこの書き方もシンプルで好きですが、独特な記述法なので、使うかどうかはコーディング規約等で確認し、判断した方がいいかもしれませんね。

たまに他所様のソースでこの記述法を見かけるため、知っておくと良いでしょう。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*