[英]php - Calling a jquery dialog box in a div loop
How do i call a jquery dialog box from a div in a loop? 如何在div中从div调用jquery对话框?
See for instance, clicking the <p>
will show up the profile of selected database user. 例如,单击
<p>
将显示所选数据库用户的个人资料。
Ex: 例如:
<div id="db-users">
<div id="user-info1"> //db userinfo 1
<p>ID#001 John Smith</p>
<div id="dialog-box">Profile of John Smith</div>
</div>
<div id="user-info2"> //db userinfo 2
<p>ID#002 John Doe</p>
<div id="dialog-box">Profile of John Doe</div>
</div>
</div>
EDIT: By the way , here is what i have done so far 编辑:顺便说一下,这是我到目前为止所做的
$('p').click(function() {
$('#dialog-box').dialog({
modal: true,
width:560,
height: 500,
draggable: false,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
});
Only one dialog box is showing up, only for John Smith. 只显示一个对话框,仅适用于John Smith。 I don't have the idea to come up the desired output.
我不打算提出所需的输出。 Any help would much appreciated.
任何帮助将不胜感激。 Thanks.
谢谢。
EDIT 2: I added IDs to all div, to identify each div. 编辑2:我向所有div添加了ID,以标识每个div。 Now, using jquery, how to implement q dialog box to show up the info when Name is clicked?
现在,使用jquery,如何在单击Name时实现q对话框来显示信息?
You are using the same id for boths div, id are uniques, maybe you should use a class for the dialog boxes like this: 您为double div使用相同的id,id是唯一的,也许您应该为对话框使用一个类,如下所示:
$('.user-info').click(function() {
$(this).find('.dialog-box').dialog({
modal: true,
width:560,
height: 500,
draggable: false,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
});
HTML: HTML:
<div id="db-users">
<div class="user-info"> //db userinfo 1
<p>ID#001 John Smith</p>
<div class="dialog-box">Profile of John Smith</div>
</div>
<div class="user-info"> //db userinfo 2
<p>ID#002 John Doe</p>
<div class="dialog-box">Profile of John Doe</div>
</div>
</div>
Remove all the IDs from the HTML except for the db-users
. 除
db-users
之外,从HTML中除去所有ID。
The classes aren't really required either, but you can leave them in if you're using them for styling. 这些类也不是必需的,但是如果您要使用它们进行样式设置,则可以将其保留。
Your HTML will look like this: 你的HTML看起来像这样:
<div id="db-users">
<div> <!-- db userinfo 1 -->
<p>ID#001 John Smith</p>
<div>Profile of John Smith</div>
</div>
<div> <!-- db userinfo 2 -->
<p>ID#002 John Doe</p>
<div>Profile of John Doe</div>
</div>
</div>
Then in your jQuery (assuming 1.7): 然后在您的jQuery(假设1.7)中:
$('#db-users p').on('click', function(e) {
$(this).next('div').dialog({
... your dialog options ...
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.