javascript基礎 条件式の復習 3項演算子、if文 – (補足)jQuery isを使った便利な分岐例

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【javascript基礎 条件式の復習 3項演算子、if文 – (補足)jQuery isを使った便利な分岐例】です。何を今更と言われてしまいそうですが…復習の意味も込めて改めて書いておきます。一部蛇足ですがjQuery isを用いたif文例もメモしておきます。

条件式(if)

一番見慣れているだろうif文です。例ではAが80以下の時とそうでない時の分岐をしていきます。

if(A <= 80){	// 80以下の場合実行}else{	// それ以外の場合実行}[/js]

jQuery isを使う場合

上の例ではAが特定の値だった場合○○するという式でしたが、もう少し具体的に特定要素にclass名【on】が付いていた場合を条件として分岐を行います。これだけだとhasClassで良いじゃんという話ですが、isでは:first-child等の疑似クラスや中身のテキストでも判別が可能と地味に便利なので覚えておいても損はないかと思います。

HTML
[html]<a class="on">CLICK</a>[/html]
JS
[js]$(function(){
$(‘a’).click(function(){
if($(this).is(‘.on’)){
// クラス【on】あるよ。
}else{
// クラス【on】ないよ。
}
});
});

条件式(3項演算子)

つぎに3項演算子での条件分岐です。個人的にはifに比べて可読性が良く式にして活用できるので初期設定等でこの記述する事があります。条件式 ? a:bという形式で条件式がtrueの時a、falseの時bとなります。詳しくはMDN(条件演算子)をご参照ください。

var A = 80;
alert(A < 50 ? '0-50':'50-100');// 結果は50-100var ANS = A < 50 ? '0-50':'50-100';alert('A is ' + ANS);// 結果は A is 50-100[/js]
複数
[js]alert(
(A === 100)?’100′:
(A >= 80) ?’80-99′:
(A >= 50) ?’50-79′:’0-49′
);
// 結果は80-99
その他(ウィンドウサイズで分岐等)
function size(){
var WINDOW_W = $(window).width();
var VIEW_W = (WINDOW_W >= 1024) ? ‘1024’ : (WINDOW_W >= 768) ? ‘768-1023’ : (WINDOW_W > 320) ? ‘321-767’ : ‘320’;
}
$(window).bind(‘load resize’,function(){
size();
});

以上になります。