Question

如何从循环中的div调用jquery对话框？

例如，单击<p>将显示所选数据库用户的配置文件。

例如：

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

编辑：顺便说一句，这是我到目前为止所做的工作

$('p').click(function() {
        $('#dialog-box').dialog({

       modal: true,
       width:560,
       height: 500,
       draggable: false,
       buttons: {
        Close: function() {
              $( this ).dialog( "close" );
        }
       }
    });
});

仅显示一个对话框，仅适用于John Smith。我没有想法提出所需的输出。任何帮助将非常感谢。感谢。

编辑2：我向所有div添加了ID，以识别每个div。现在，使用jquery，如何实现q对话框以在单击Name时显示信息？

Answer 1

你对两个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：

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

Answer 2

删除HTML中除db-users以外的所有ID。

这些类也不是真正需要的，但如果您使用它们进行样式设置，则可以将它们保留。

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

然后在你的jQuery中（假设1.7）：

$('#db-users p').on('click', function(e) {
    $(this).next('div').dialog({
        ... your dialog options ...
    });
});

php - 在div循环中调用jquery对话框

2 个答案: