質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

741閲覧

jQueryを端的に書き換えたいです。

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2020/03/04 06:04

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/03/04 06:06

わかやすさ重視なら端的にまとめる必要はないのでは?両者の同居は難しいと思いますし、感覚に依存しすぎます。
退会済みユーザー

退会済みユーザー

2020/03/04 06:08

わかりにくくてすみません。 書籍は分かりやすさを重視して単調に書かれていますが、 自分はなるべく効率的に書きたいので、端的に書き換えたいとの趣旨になります。
kei344

2020/03/04 06:16

コードを提示されるなら、書誌情報も提示されたほうがよいです。
m.ts10806

2020/03/04 06:19

いえ、私の読み込み不足でした。失礼。
yambejp

2020/03/04 06:33

メソッドチェーンのないjQueryなんて使い勝手が最悪でむしろわかりにくいと思いますけどね
guest

回答1

0

ベストアンサー

ざっと検証しましたが「#bg」は高さがない段落なのでクリックできないですね

投稿2020/03/04 06:52

yambejp

総合スコア114883

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問