php-在div循環中調用jquery對話框

Question

如何在div中從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，如何在單擊Name時實現q對話框來顯示信息？

Answer 1

您為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：

<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

除db-users之外，從HTML中除去所有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 ...
    });
});