動的divを使用したJQueryダイアログ

Question

Webアプリケーションを構築していますが、1つのページに6つのdivが動的に生成され、各divには隠れた子divとボタンが含まれています。指定されたdivには、そのdivの子がコンテンツとして表示されます。

JS Fiddle（実際のコードを見るためにスニペットを実行する）のMCVEがあります。私のコードは非常に大きく、プライバシー上の理由から共有することはできないため、私は直面している問題を再現しました。 ）：

<iframe width="100%" height="300" src="//jsfiddle.net/j7bbmLxn/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

ここにあなたがしたい場合は、あまりにもリンクです：https://jsfiddle.net/j7bbmLxn/

問題あなたが最初のボタンをクリックしたときに、私はsthat見ることができるように、それは4 Dの4つのダイアログを示しては、最後のものからファット1へのivs。

私は各ボタンがそれが与えられたdivを返すようにしたいです。また別の問題があります。すべてのダイアログを閉じて最初のボタンをクリックしても何も表示されません。なぜですか？お時間を

感謝のは

Answer 1

最初の問題。すべてのボタンに同じIDがあります。

button id = "showMovieInfo2" 

第2に、ダイアログに問題があります。各ダイアログのIDを設定する必要があります。ここ

は完全な例である

https://jsfiddle.net/j7bbmLxn/3/

この情報がお役に立てば幸いです。

Answer 2

私は各ボタンに一意のID値を与えているanswer.Iを提供するために、あなたのフィドルを更新しており、関連する各divのクラス名は、ボタンのID値で始まる

Click here to see updated fiddle

変更されたHTML

These are 4 divs generated via python templates by the server . 
<div class = "movie"> 
<p> 
This a movie 1 
</p> 
    <button id = "showMovieInfo1"> 
    Show dialog 
    </button> 
    <div class = "showMovieInfo1-info hidden"> 
    <p> 
    Some Info here 
    </p> 
    </div> 
</div> 

<div class = "movie"> 
<p> 
This a movie 2 
</p> 
    <button id = "showMovieInfo2"> 
    Show dialog 
    </button> 
    <div class = "showMovieInfo2-info hidden"> 
    <p> 
    Some Info here 2 
    </p> 
    </div> 
</div> 

<div class = "movie"> 
<p> 
This a movie 3 
</p> 
    <button id = "showMovieInfo3"> 
    Show dialog 
    </button> 
    <div class = "showMovieInfo3-info hidden"> 
    <p> 
    Some Info here 3 
    </p> 
    </div> 
</div> 

<div class = "movie"> 
<p> 
This a movie 4 
</p> 
    <button id = "showMovieInfo4"> 
    Show dialog 
    </button> 
    <div class = "showMovieInfo4-info hidden"> 
    <p> 
    Some Info here 4 
    </p> 
    </div> 
</div> 

変更JSコード

$(function() { 
      $('[id^=showMovieInfo]').click(function(){  
     $("."+$(this).attr('id')+"-info").dialog(); 
     }); }); 

Answer 3

ボタンをIDの代わりに使用するには、HTMLを少し変更する必要があります。 IDは一意でなければなりません。あなたの元のコードはここだけ、あなたがやりたいだろう完全に動作するコードですあなたがshowMovieInfoクラスを持っているのボタンを変更したと仮定して、

だから、最初のボタンをクリックリスナーを設定します

基本的に私は、押されたボタンに属するdivのHTMLを取得し、それをコンテンツとしてダイアログを開きます。 $ dlg変数は、開いているダイアログへの参照を保存するために使用します。

var $dlg = undefined; 
 
\t \t $(function() { 
 
\t \t \t $(".showMovieInfo").click(function(){ 
 
     
 
     \t var html = $(this).parent().find(".movie-info").get(0).outerHTML; 
 
      if ($dlg){ 
 
      \t $dlg.dialog("close"); 
 
      } 
 
      $dlg = $(html).dialog();   
 
     }) 
 
    \t \t });

.hidden{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 

 

 

 

 
These are 4 divs generated via python templates by the server . 
 
<div class = "movie"> 
 
<p> 
 
This a movie 1 
 
</p> 
 
    <button class = "showMovieInfo"> 
 
    Show dialog 
 
    </button> 
 
    <div class = "movie-info hidden"> 
 
    <p> 
 
    Some Info here 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class = "movie"> 
 
<p> 
 
This a movie 2 
 
</p> 
 
    <button class = "showMovieInfo"> 
 
    Show dialog 
 
    </button> 
 
    <div class = "movie-info hidden"> 
 
    <p> 
 
    Some Info here 2 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class = "movie"> 
 
<p> 
 
This a movie 3 
 
</p> 
 
    <button class = "showMovieInfo"> 
 
    Show dialog 
 
    </button> 
 
    <div class = "movie-info hidden"> 
 
    <p> 
 
    Some Info here 3 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class = "movie"> 
 
<p> 
 
This a movie 4 
 
</p> 
 
    <button class = "showMovieInfo"> 
 
    Show dialog 
 
    </button> 
 
    <div class = "movie-info hidden"> 
 
    <p> 
 
    Some Info here 4 
 
    </p> 
 
    </div> 
 
</div>

Answer 4

これを試してみてください。 elementsdynamicallyを作成し、それらの要素で作業する方法を示していますdynamically。以下の作業経験を参照してください。

<html> 
 
<head></head> 
 
<title></title> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<style type="text/css"> 
 
.mychild 
 
{ 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 2px solid black; 
 
    background-color: gray; 
 
    color: white; 
 
    font-family: monospace; 
 
    margin: 50px; 
 
    position: relative; 
 
} 
 

 
.but{ 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.hideme{ 
 
    width:100%; 
 
    height: 150px; 
 
    background-color: red; 
 
    color:white; 
 
    text-align: center; 
 
    font-size: 40px; 
 
    font-family: Helvetica; 
 
    position: relative; 
 
    right: 0; 
 
    border:2px solid white; 
 
    box-shadow: 2px 3px 2px white; 
 

 
} 
 

 
</style> 
 

 
<body> 
 

 
<div class="mycontainer"></div> 
 

 
</body> 
 

 
<script type="text/javascript"> 
 

 
$(document).ready(function(){ 
 
    
 
    for(var i =0;i<6;i++) 
 
    { 
 
    var create_div = $('<div class="mychild" id="child'+i+'"><h1>This is movie'+i+'</h1><button class="but" id="button-'+i+'"">Show More Details</button><div style="display:none;" class="hideme" id="hid'+i+'">Some Information'+i+'</div></div>'); 
 
    $(".mycontainer").append(create_div); 
 
    
 
    } 
 

 
    checkclick(); 
 

 
}); 
 

 
function checkclick() 
 
{ 
 
    $(".mycontainer .mychild .but").click(function(){ 
 

 
    $(".mycontainer .mychild .hideme").css({"display":"none"}); 
 
    var checkthe_id = $(this).attr("id"); 
 
    alert(checkthe_id); 
 
    var splidid = checkthe_id.split('-'); 
 
    var the_value = splidid[1]; 
 
    
 
    alert(the_value); 
 
    $("#hid"+the_value).css({"display":"block"}) 
 
    }); 
 
} 
 

 
</script> 
 

 
</html>

醜いスタイルのために申し訳ありません。私はあなたの論理を心配しています。これがあなたに役立つことを願っています。試してみてください。ご不明な点がございましたら、お尋ねください。