お世話になっております。先日同じような質問をさせていただいたものです。
今回困っているのは、JSの一行目になります。
JS
var children = $(".picture_click").children("img"); $(children).click(function(){ var $copy = $(this).clone(); var $font = $(".font").clone(); $("#picture_append").append($copy); $("#coment").append($font); setTimeout(function(){ $("#backcolor_brack").animate({ opacity:0.8, zIndex:100000000000000000000000, },1000); },500); setTimeout(function(){ $("#backcolor_brack").animate({ width:'100%', },800); },1500); setTimeout(function(){ $("#base_back,#button").animate({ opacity:1, zIndex:100000000000000000000001, },400); },2000); setTimeout(function(){ $("#base_back").animate({ width:'70%', },800); },2400); setTimeout(function(){ $("#picture_append,#coment,#font").fadeTo("800",1); $($font).animate({ opacity:1, },300); },3200); });
HTML
<table border="0" style="z-index:0; text-align:center; width:100%; margin:300px auto 20px auto; position:absolute;" id="S_HP"> <tr> <td style="text-align:center;"> <a><div class="picture_click"><img style="width:100%;" src="sample_picture/IMG_0460.JPG" alt=""><a style="opacity:0;" class="font">あかさたな。</a></div></a> </td><!--一枚目の写真と白枠内のコメント欄に記入用のコメント--> <td style="text-align:center;"> <a><div class="picture_click"><img style="width:100%;" src="sample_picture/IMG_1328.JPG" alt=""><a style="opacity:0;" class="font">あいうえお</a></div></a><br /> </td><!--二枚目の写真と白枠内のコメント欄に記入用のコメント--> </tr> </table> <div style="width:20px; height:1800px;; background-color:#000; opacity:0; z-index:1; overflow:auto; position:absolute; top:0;" id="backcolor_brack"></div><!--fullスクリーンの黒背景--> <div style="opacity:0; position:fixed; top:10%; right:15%; z-index:1; width:50px; height:50px;" id="button"><img style="width:100%; height:100%;" src="sample_picture/121.119.137.122.gif"></div><!--表示を消すためのバツボタン--> <div style="width:20px; height:450px; opacity:0; z-index:1; overflow:auto; background-color:#FFF; position:fixed; top:0; left:0; right:0; bottom:0; margin:auto;" id="base_back"><!--中央に表示する画像とコメントの白大枠--> <div id="picture_append" style="width:48%; height:auto; display:none; float:left; margin:1% 1%; line-height:50%;"></div><!--画像枠--> <div style="width:50%; height:auto; display:none; float:left;" id="coment"></div><!--コメント枠--> </div>
とゆう具合に来ました。仕組みは、画像をクリックしたら黒い背景の真ん中に白色枠ができ、そのなかに写真とコメントが表示されるという仕組みを作っています。今回の本題なのですが、class属性内の子要素の設定なのですが、
$(".picture_click img").click(function(){ var $copy = $(this).clone(); var $font = $(".font").clone(); $("#picture_append").append($copy); $("#coment").append($font); setTimeout(function(){ $("#backcolor_brack").animate({ opacity:0.8, zIndex:100000000000000000000000, },1000); },500);
とゆうような形にしたとき、一枚目と二枚目のコメントがどちらも同時に表示されてしまうという現象が起きてしまったため、class属性内の子要素について考えています。
現段階の設定では画像をクリックしてもJSが反応されていない形です。
うまいこと、分けて表示できることはできないでしょうか。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/08 09:52