menu
menu

キーワード検索

 

前月(6月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 5 ↑) 【jQuery】jQueryでドロップダウンメニュー
  3. ( 2 ↓) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 8 ↑) 【CSS】レスポンシブデザインのブレークポイントは⁉
  5. ( 3 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
  6. ( 6 - ) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 7 - ) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 9 ↑) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  9. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
  10. (10 - ) 【HTML5】スマホサイトの作成・基本編
このエントリーをはてなブックマークに追加

【jQuery】入門11. switch文による条件分岐

【jQuery】入門11. switch文による条件分岐

こんにちは(・∀・)

jQuery入門です。前回の【jQuery】入門10. if文による条件分岐に続いて今回はswitch文による条件分岐についてです。

以前ご紹介しましたif文による条件分岐は、二つの条件を分岐処理していく方法でしたが、switch文による条件分岐は多数の条件を分岐処理していく方法になります。

switch文による条件分岐

if文による条件分岐でたいがいは事足りてしまいますのでswitch文を使った条件分岐を使う機会は少ないと思います。ですが、まったく使わないということもありませんし、どなたかが書いたコードを見て「何これー」とならないよう一応ご紹介しておきます。

基本構文

var num = "hoge";
switch (num) {
case "hoge":
alert("hogeです。");
break;
case "hogehoge":
alert("hogehogeです。");
break;
}
複数の値

var num = "e";
switch (num) {
case "a":
case "b":
case "c":
alert("a, b or cです。");
break;
case "d":
case "e":
alert("d or eです。");
break;
}
デフォルトの処理を指定

var num = 0;
switch (num) {
case 1:
alert("1です。");
break;
case 2:
alert("2です。");
break;
default:
alert("defaultです。");
break;
}
HTML

<p class="demo1">クリックしてみて</p>
JavaScript

$(function(){
$(".demo1").click(function(){
var num = "hoge";
switch (num) {
case "hoge":
alert("hogeです。");
break;
case "hogehoge":
alert("hogehogeです。");
break;
}
});
});
1. 基本構文のResult

click!

この場合「hoge」がアラートで表示されます。

HTML

<p class="demo2">クリックしてみて</p>
JavaScript

$(function(){
$(".demo2").click(function(){
var num = "e";
switch (num) {
case "a":
case "b":
case "c":
alert("a, b or cです。");
break;
case "d":
case "e":
alert("d or eです。");
break;
}
});
});
2. 複数の値のResult

click!

この場合「d or eです。」がアラートで表示されます。

HTML

<p class="demo3">クリックしてみて</p>
JavaScript

$(function(){
$(".demo3").click(function(){
var num = 0;
switch (num) {
case 1:
alert("1です。");
break;
case 2:
alert("2です。");
break;
default:
alert("defaultです。");
break;
}
});
});
3. デフォルトの処理を指定した場合のResult

click!

この場合0は無いので「defaultです。」がアラートで表示されます。

ちなみに基本構文をif文に置き換えてみると...


if(num === hoge){
alert("hogeです。");
}

という感じになります。

switch文での比較は厳密な比較になりますので「==」ではなく「===」となることにご注意ください。

 

以上がswitch文による条件分岐でした。入門編では少し難しかったですかね?!まあ「switch文じゃないと分岐処理できない」という場合以外はif文を使って分岐処理すればいいと思います。

 

にほんブログ村 IT技術ブログ JavaScriptへ

関連リンク

JavaScript入門
jQuery入門

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