jQueryの初学者です。現在入門書で学習中です。
書籍のコンセプトとして、わかりやすさを重視してメソッドチェーンや複雑な書き方はしないとの方針です。
私はより実務に近い形で書きたいと思い、メソッドチェーンやプロパティを複数にまとめて書きたいと思っています。
記述しているのはライトボックス風モーダルウィンドウのコードになります。
以下までは自分で端的にまとめてみたのですが、これ以上効率的な書き方はありますでしょうか?
以下が書籍の見本コードです。
jQuery
1$(function(){ 2 // サムネールをクリック 3 $("a").click(function(){ 4 // body要素の最後にdiv#bgを追加 5 $("body").append('<div id="bg">'); 6 7 // body要素の最後にdiv#photoを追加 8 $("body").append('<div id="photo">'); 9 10 // それぞれ非表示にする 11 $("#bg").hide(); 12 $("#photo").hide(); 13 14 // #photoの中にimg要素を追加 15 $("#photo").html("<img>"); 16 17 // img要素にsrc属性を設定 18 $("#photo img").attr("src", $(this).attr("href")); 19 20 // img要素にwidth、height、alt属性を追加 21 $("#photo img").attr("width", 640); 22 $("#photo img").attr("height", 420); 23 $("#photo img").attr("alt", "Photo"); 24 25 // #bgと#photoをフェードイン 26 $("#bg").fadeIn(); 27 $("#photo").fadeIn(); 28 29 // 背景をクリック 30 $("#bg").click(function(){ 31 // 背景(自分自身)をフェードアウト、完了したら削除 32 $(this).fadeOut(function(){ 33 $(this).remove(); 34 }); 35 36 // 拡大画像をフェードアウト、完了したら削除 37 $("#photo").fadeOut(function(){ 38 $(this).remove(); 39 }); 40 }); 41 42 return false; 43 }); 44}); 45 46
以下が自分で単調な部分をまとめて記述したものです。
(終盤の//背景をクリックしたら閉じれるようにするの部分はまとめれそうですが、thisの扱いがよく分からなく、、。)
jQuery
1$(function () { 2 $('a').on('click', function () { 3 //body要素の最後にdiv#bgを追加 4 $('body').append('<div id="bg">','<div id="photo">') 5 6 //それぞれ非表示にする 7 $('#bg,#photo').hide(); 8 9 //#photoの中にimg要素を追加 10 $('#photo').html('<img>'); 11 12 //img要素にsrc属性を設定 13 $('#photo img').attr('src', $(this).attr('href')); 14 15 //img要素にwidth,height,alt属性を設定 16 $('#photo img').attr( { 17 'width': 640, 18 'height': 420, 19 'alt': 'photo', 20 }), 21 22 //それぞれを表示する 23 $('#bg,#photo').fadeIn(); 24 25 //背景をクリックしたら閉じれるようにする 26 $('#bg').on('click',function(){ 27 //背景をフェードアウト、完了後に削除 28 $(this).fadeOut(function(){ 29 $(this).remove(); 30 }); 31 //画像をフェードアウト、官僚したら削除 32 $('#photo').fadeOut(function(){ 33 $(this).remove(); 34 }); 35 }); 36 37 return false; 38 }); 39 40}); 41
回答1件
あなたの回答
tips
プレビュー