menu
menu

キーワード検索

 

12月更新・前月(11月)の人気記事トップ10 - 12/02/2019

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 5 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  3. ( 2 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. ( 3 ↓) 【CSS】CSSだけでドロップダウンメニュー
  5. (圏外↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  6. ( 4 ↓) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  7. (圏外↑) 【Google】Googleアカウントのメールアドレスを変更する方法
  8. (圏外↑) 【Mac】MacにGoogle Driveをインストール
  9. (圏外↑) 【Suica】iPhoneでSuicaをクレジットカード無しで使う方法
  10. ( 7 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
このエントリーをはてなブックマークに追加

【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文を使って分岐処理すればいいと思います。

関連リンク

JavaScript入門
jQuery入門

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