こんにちは。
今回は「jQueryで条件分岐を使ってみよう！」
前回は関数について書いたので、今回は条件分岐について書きたいと思います。
条件分岐とは
条件分岐とは状況によって処理を変更する事です。
実際に条件分岐を使ってみよう！
jQueryで条件分岐を使うには、主にif文とswitch文があります。
まずはif文からです。
1 2 3 4 5 6 7 8 | <script> $(function(){ var textColor = $('p').css('color'); if(textColor == 'rgb(255, 0, 0)'){ $('.text').css('color','rgb(0, 0, 255)'); } }); </script> |
もしも文字色が赤だったら青にする処理をします。
if文の書き方
ifを書いてその横の()の中に条件を書きます。
1 2 3 4 5 6 7 | <script> $(function(){ if(条件){ 処理内容 } }); </script> |
if文には下記のようにelse文やelse if文を加える事もできます。
1 2 3 4 5 6 7 8 9 | <script> $(function(){ if(条件){ 条件にあった時の処理内容 } else { 条件にあわなかった時の処理内容 } }); </script> |
1 2 3 4 5 6 7 8 9 10 11 | <script> $(function(){ if(条件1){ 条件1にあった時の処理内容 } else if(条件2){ 条件1にあわなくて、条件2があった時の処理内容 } else { 条件1と条件2がともにあわなかった時の処理内容 } }); </script> |
switch文を使ってみよう！
switch文はたくさん分岐があった場合にすっきり書く事ができます。
1 2 3 4 5 6 7 8 9 10 11 12 | <script> $(function(){ var hoge = 2; switch(hoge){ case 1 : alert("hogeは1です。"); break; case 2 : alert("hogeは2です。"); break; case 3 : alert("hogeは3です。"); break; case 4 : alert("hogeは4です。"); break; default : alert("全部違います。"); break; } }); </script> |
1だったら、hogeは1です。とアラートが出ます。
2だったら、hogeは2です。とアラートが出ます。
3だったら、hogeは3です。とアラートが出ます。
4だったら、hogeは4です。とアラートが出ます。
全て違えば、全部違います。とアラートが出ます。
今回は2なので、hogeは2です。とアラートが出ます。
switch文の書き方
switch文は特殊で下記のような書き方になります。
1 2 3 4 5 6 7 8 9 10 11 | <script> $(function(){ switch(条件){ case 選択肢1 : 選択肢1だった時の処理; break; case 選択肢2 : 選択肢2だった時の処理; break; case 選択肢3 : 選択肢3だった時の処理; break; case 選択肢4 : 選択肢4だった時の処理; break; default : いずれにも当てはまらなかった時の処理; } }); </script> |
jQuery レッスンブック jQuery2.X/1.X対応
jQueryで変数を使ってみよう！
jQueryで関数を使ってみよう！
jQueryで繰り返しを使ってみよう！
いかがでしたか。次回は「繰り返し」について書きたいと思います。
以上で「jQueryで条件分岐を使ってみよう！」でした。
