Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips
ネタ元:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips : アシアルブログ
ちょっと気になるコードがあるのでツッコミを。
1.現在見ているページのナビゲーションをアクティブにする
if (document.URL.indexOf("001.html") != -1) {
$("nav a.top").toggleClass("on");
} else if (document.URL.indexOf("002.html") != -1){
$("nav a.list").toggleClass("on");
}
class属性の付加にtoggleClass()を利用しているけどaddClass()のほうがシンプルでよいです。
if (document.URL.indexOf("001.html") != -1) {
$("nav a.top").addClass("on");
} else if (document.URL.indexOf("002.html") != -1){
$("nav a.list").addClass("on");
}
2.liの中身がない場合、その上位要素のulごと表示をしない
if($("ul.class1 li").size()=="0") {
$("ul.class1").hide().parent().append("ここに<ul>がありました");;
}
if($("ul.class2 li").size()=="0") {
$("ul.class2").hide().parent().append("ここに<ul>がありました");
}
size()はjQuery 1.8 から非推奨なのでlengthを使いましょう。あと、このままだと同じクラス名が複数ある(たとえばul.class1がページ内に数カ所ある)と全部に対して同じ処理を行ってしましますのでeach()で個別に処理を行ったほうが安全かも。
$("ul.class1,ul.class2").each(function(){
if($(this).find("li").length===0){
$(this).hide().parent().append("ここに<ul>がありました");
}
});
3.ある文字列を含む要素を強制非表示/内容を変更する
$("a:contains('ニセモノ')").hide();
$("a:contains('バケモノ')").text("オバケモノ").css('background', '#000').css('color', '#FFF');
css()は何回にもわけずに1回で書いたほうがキレイです。
$("a:contains('ニセモノ')").hide();
$("a:contains('バケモノ')").text("オバケモノ").css({
'background':'#000',
'color':'#FFF'
});
4.ユーザーエージェントによって表現を変える
if(navigator.userAgent.indexOf("Chrome") != -1) {
$("a:contains('Chrome')").toggleClass("on");
} else if(navigator.userAgent.indexOf("Firefox") != -1) {
$("a:contains('Firefox')").toggleClass("on");
} else if(navigator.userAgent.indexOf("Safari") != -1) {
$("a:contains('Safari')").toggleClass("on");
} else {
$("a:contains('Other')").toggleClass("on");
}
1と同じくtoggleClass()ではなくてaddClass()で。classを付けるためにtoggleClass()を使うと後でコードを触る人に意図が伝わりにくいです。
if(navigator.userAgent.indexOf("Chrome") !== -1) {
$("a:contains('Chrome')").addClass("on");
} else if(navigator.userAgent.addOf("Firefox") !== -1) {
$("a:contains('Firefox')").addClass("on");
} else if(navigator.userAgent.indexOf("Safari") !== -1) {
$("a:contains('Safari')").addClass("on");
} else {
$("a:contains('Other')").addClass("on");
}
特にネタ元のコードが悪いというわけではないですが、少し規模が大きくなると混乱を招きやすかなと思います。こういった書き方もあるんだと心の片隅に覚えておいてください。
関連エントリー
jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
14のjQueryベストプラクティス
8のjQueryのすごいTIPS
jQueryのコードを良くする5つのTIPS
スポンサードリンク
«jQuery 2.0を利用するために注意すること | メイン | CSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」が終了しました»