Question

我正在构建一个Web应用程序，在一个页面中我有6个动态生成的div，每个div包含一个隐藏的子div和一个按钮，我想当用户单击给定div的按钮时，会出现一个对话框，其中包含该div的子项作为内容。

这是JS Fiddle的MCVE（运行代码片段以查看实际代码）以帮助您理解（我的代码非常大，我出于隐私原因无法共享它，因此我重新创建了问题我正对着。）：

＆＃13;

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

＆＃13;

如果您需要，也可以在此链接：https://jsfiddle.net/j7bbmLxn/

问题，你可以看到，当点击第一个按钮时，它显示4个div的4个对话框，从最后一个到第一个。

我希望能够让每个按钮返回给定的div。还有另一个问题：当我关闭所有对话框并重新点击第一个按钮时，没有出现，为什么？

感谢您的时间

Answer 1

我已经更新了你的小提琴以提供答案。我给每个按钮一个唯一的ID值，每个相关的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 2

第一个问题。所有按钮都有相同的ID。

button id = "showMovieInfo2"

第二，你有对话问题。您需要为每个对话框设置ID才能工作。

这里是完整的例子

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

希望这有帮助。

Answer 3

您需要稍微更改一下HTML，为按钮提供一个类而不是一个ID。 ID必须是唯一的。您的原始代码仅在第一个按钮

上设置了单击侦听器

因此，假设您已经更改了按钮以使 showMovieInfo 类在这里完成了您想要的完整工作代码

基本上我得到按下按钮的div的HTML，然后打开一个对话框作为内容。 $ dlg变量用于存储对打开对话框的引用，以便您可以关闭它。

＆＃13;

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

＆＃13;

.hidden{
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 4

试试这个。这显示了如何创建elements dynamically并使用这些元素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>

抱歉丑陋的风格。我关心你的逻辑。希望这对你有所帮助。尝试一下，如果您有任何疑问，请询问。

带动态div的JQuery Dialog

4 个答案: