7月更新・前月(6月)の人気記事トップ10 07/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 04 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 05 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 02 ↓) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 ↓) 【Mac】Safariでソースコードを見る方法
- ( 10 ↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【GIMP】レイヤーをロック
- (圏外↑) 【Inkscape】InkscapeでCMYKカラーを表示する
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- ( 06 ↓) 【Labs】CSSだけでドロップダウンメニュー
【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文を使って分岐処理すればいいと思います。