menu
menu

キーワード検索

 

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

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

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

  • Guide

jQuery

こんにちは(・∀・)

jQuery入門です。前にやった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

クリックしてみて

この場合「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

クリックしてみて

この場合「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

クリックしてみて

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

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


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

という感じになります。

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


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

関連リンク

jQuery入門目次

  • カテゴリー:Guide