menu
menu

キーワード検索

 

前月(4月)の人気記事トップ10 - 5/1/2019

  1. ( 2 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  3. ( 1 ↓) 【CSS】CSSだけでドロップダウンメニュー
  4. (圏外↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 3 ↓) 【jQuery】jQueryでドロップダウンメニュー
  6. (圏外↑) 【決定版】フォントの設定はこれで決まり❗️
  7. (圏外↑) 【Mac】iMovieの保存場所を変更する
  8. (圏外↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  9. ( 5 ↓) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  10. ( 9 ↓) 【制作Tips】iPad画面解像度まとめ
このエントリーをはてなブックマークに追加

【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文
このエントリーをはてなブックマークに追加