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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2105閲覧

jQueryのclone()を使った画像ポップアップについて(2) class属性内の̪子要素について

kuroishi

総合スコア53

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/08 08:21

お世話になっております。先日同じような質問をさせていただいたものです。
今回困っているのは、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が反応されていない形です。
うまいこと、分けて表示できることはできないでしょうか。よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

以下のようにしてはいかがでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 </style> 12</head> 13<body> 14<table border="0" style="z-index:0; text-align:center; width:100%; margin:300px auto 20px auto; position:absolute;" 15 id="S_HP"> 16 <tr> 17 <td style="text-align:center;"> 18 <a> 19 <div class="picture_click"> 20 <img style="width:100%;" 21 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=sample_picture/IMG_0460.JPG" alt=""> 22 <a style="opacity:0;" class="font">あかさたな。</a> 23 </div> 24 </a> 25 </td><!--一枚目の写真と白枠内のコメント欄に記入用のコメント--> 26 <td style="text-align:center;"> 27 <a> 28 <div class="picture_click"> 29 <img style="width:100%;" 30 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=sample_picture/IMG_1328.JPG" alt=""> 31 <a style="opacity:0;" class="font">あいうえお</a> 32 </div> 33 </a> 34 <br/> 35 </td><!--二枚目の写真と白枠内のコメント欄に記入用のコメント--> 36 </tr> 37</table> 38 39<div style="width:20px; height:1800px;; background-color:#000; opacity:0; z-index:1; overflow:auto; position:absolute; top:0;" 40 id="backcolor_brack"></div><!--fullスクリーンの黒背景--> 41<div style="opacity:0; position:fixed; top:10%; right:15%; z-index:1; width:50px; height:50px;" id="button"> 42 <img style="width:100%; height:100%;" 43 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=sample_picture/121.119.137.122.gif"> 44</div><!--表示を消すためのバツボタン--> 45 46<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;" 47 id="base_back"><!--中央に表示する画像とコメントの白大枠--> 48 <div id="picture_append" 49 style="width:48%; height:auto; display:none; float:left; margin:1% 1%; line-height:50%;"></div><!--画像枠--> 50 <div style="width:50%; height:auto; display:none; float:left;" id="coment"></div><!--コメント枠--> 51</div> 52<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 53<script> 54 $(".picture_click").click(function () {// 変更。 55 var $copy = $(this).clone(); 56 var $font = $(this).children(".font").clone();// 変更。 57 $("#picture_append").append($copy); 58 $("#coment").append($font); 59 setTimeout(function () { 60 $("#backcolor_brack").animate({ 61 opacity: 0.8, 62 zIndex: 100000000000000000000000, 63 }, 1000); 64 }, 500); 65 setTimeout(function () { 66 $("#backcolor_brack").animate({ 67 width: '100%', 68 }, 800); 69 }, 1500); 70 setTimeout(function () { 71 $("#base_back,#button").animate({ 72 opacity: 1, 73 zIndex: 100000000000000000000001, 74 }, 400); 75 }, 2000); 76 setTimeout(function () { 77 $("#base_back").animate({ 78 width: '70%', 79 }, 800); 80 }, 2400); 81 setTimeout(function () { 82 $("#picture_append,#coment,#font").fadeTo("800", 1); 83 $($font).animate({ 84 opacity: 1, 85 }, 300); 86 }, 3200); 87 }); 88</script> 89</body> 90</html>

投稿2017/05/08 08:39

s8_chu

総合スコア14731

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

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

kuroishi

2017/05/08 09:52

またも早急な返答ありがとうございました!大変助かります! またよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問