如何在 PHP while 循环中仅打开一个 jquery 对话框

Question

我有一个 HTML 表格，其中行显示在 while 循环中。 在每一行中我都有一个<td>，在每一行中我放置一个<img>。

<table>
 <tr>
  <th class="text-left highlight">presso</th>
 </tr>
<?php
while...
?>
<div class="myClass" title="info" style="display: none;">
bla bla bla
</div>
 <tr>
  <td class="text-left">
   <img src="img/i.png" class="myImg" /><?php echo $while_loop_result;?>
  </td>
 </tr>
<?php
}
?>
</table>

请注意 div 的类 myClass 和 img 的 myImg。

现在，我想点击每个表格行中的<img>，然后打开一个对应于该特定行的 jquery 对话框。

<script type="text/javascript">
$(function() {
$('.myClass').dialog(
{
      autoOpen: false,
      maxWidth:300,
      maxHeight: 300,
      width: 300,
      height: 300,
      modal: true,
      show: {
      effect: "blind",
      duration: 1200
      },
      hide: {
      effect: "drop",
      duration: 1200
      }
    }
);
$('.myClass').dialog('close');
$(".myImg").click(
 function (e) {
   $('.myClass').dialog('open');
 });
})
</script>

上面的脚本会打开所有对话框窗口。如果表格有五行，则通过单击五个图像中的任何一个，将打开所有五个对话框弹出窗口。

如何只打开我点击的那个？

Answer 1

很明显，如果你提到一个类，你所有的类都将被打开。您需要为每个元素分配单独的 ID。解决方法应该与此类似。

     $sql = "Your query string";
    $results = mysqli_query($conn, $sql);

    if (mysqli_num_rows($results) > 0) {
        // output data of each row
$i=1;
        while($row = mysqli_fetch_assoc($results)) {
echo '<div class="myClass" id="expand-'.$i.'" title="info" style="display: none;">
bla bla bla
</div>
 <tr>
  <td class="text-left">
   <img src="img/i.png" class="myImg" id="'.$i.'"/>'.$row["somedatabasefield"].'
  </td>
 </tr>';
$i=$i+1;
}

}

现在，当您生成所有 td 和 div 后，我们将相应地看到 jquery 代码。它应该是这样的。我没有自己检查过，但这会让你知道该怎么做。

<script type="text/javascript">
$(function() {
$('.myClass').dialog(
{
      autoOpen: false,
      maxWidth:300,
      maxHeight: 300,
      width: 300,
      height: 300,
      modal: true,
      show: {
      effect: "blind",
      duration: 1200
      },
      hide: {
      effect: "drop",
      duration: 1200
      }
    }
);
$('.myClass').dialog('close');
$(".myImg").click(
 function (e) {
   $('#expand-'+this.id).dialog('open');
 });
})
</script>

如您所见，在此解决方法中只需要对 jquery 进行一项更改。