PHP while循环中的jquery对话框答案

【问题标题】：jquery dialog in PHP while loopPHP while循环中的jquery对话框
【发布时间】：2015-12-12 15:41:33
【问题描述】：

以下代码仅适用于表格第一行中的按钮。其他自动生成的行的按钮不会打开任何对话框。我想问题是我没有为每个按钮分配不同的id。我怎样才能做到这一点？我读了this page，但没有任何效果。

<table class="table-hovered">
    <tr>
        <th class="text-left big">TITOLO</th>
        <th class="text-centered" align="center">
            <img src="img/w.png" width="35" height="35" title="wikipedia" align="middle"><br>
            wikipedia
        </th>
    </tr>
    <? while($objResult = mysql_fetch_array($objQuery))
    { ?>
        <tr>
            <td class="text-left"><?=$objResult["titolo"];?></td>
            <td class="text-centered">
                <button id="trigger" class="btn">definizione</button>
                <div id="dialog" style="display: none;" title="definizione">
                    <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe>
                </div>
            </td>
            <script>
                $("#trigger").click(function() {
                    $("#dialog").dialog("open");
                });

                $("#dialog").dialog({
                    autoOpen: false,
                    position: 'center' ,
                    title: 'definizione',
                    draggable: true,
                    width: 500,
                    height: 400, 
                    resizable: true,
                    modal: true,
                    show: 'slide',
                    hide: 'fade'
                });
            </script>
        </tr>
    <?  } ?>
</table>

【问题讨论】：

因为你在做一个循环，你有n数量的<button id="trigger">和n数量的<div id="dialog">。由于ids 应该是唯一的，所以 jQuery(/javascript) 只会找到并绑定到第一个。您需要使这些 ids 独一无二，或者将它们更改为 <button class="trigger"> / <div class="dialog"> 和 $(".trigger").click(function() {$(".dialog").dialog("open"); });/$(".dialog").dialog({... 的类
这个解决方案有效，但是当我点击任何按钮时，所有对话框窗口都会打开（一个在另一个上）。

标签： php jquery while-loop dialog

【解决方案1】：

问题是因为您正在创建具有相同id 属性的多个元素，其中id 在单个document 中必须是唯一的。相反，使用#trigger 上的公共类，然后从那里找到要显示的相关#dialog。试试这个：

<table class="table-hovered">
    <tr>
        <th class="text-left big">TITOLO</th>
        <th class="text-centered" align="center">
            <img src="img/w.png" width="35" height="35" title="wikipedia" align="middle"><br>
            wikipedia
        </th>
    </tr>
    <? while($objResult = mysql_fetch_array($objQuery))
    { ?>
        <tr>
            <td class="text-left"><?=$objResult["titolo"];?></td>
            <td class="text-centered">
                <button class="btn trigger">definizione</button>
                <div class="dialog" style="display: none;" title="definizione">
                    <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe>
                </div>
            </td>
        </tr>
    <?  } ?>
</table>

然后，您可以将单个事件处理程序分配给 <head> 或 </body> 之前的 .trigger 元素，如下所示：

<script type="text/javascript">
    $(function() {
        $(".trigger").click(function() {
            $(this).next('.dialog').dialog("open");
        });

        $(".dialog").dialog({
            autoOpen: false,
            position: 'center' ,
            title: 'definizione',
            draggable: true,
            width: 500,
            height: 400, 
            resizable: true,
            modal: true,
            show: 'slide',
            hide: 'fade'
        });
    });
</script>

【讨论】：

这个过程似乎不起作用。当我点击按钮时，没有打开一个对话窗口。

【解决方案2】：

理论上是这样的（将<?=$objResult["titolo"];?>添加到循环中的#trigger ID：

<td class="text-left"><?=$objResult["titolo"];?></td>
<td class="text-centered"><button id="trigger<?=$objResult["titolo"];?>" class="btn">definizione</button><div id="dialog" style="display:none;" title="definizione"><iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe></div></td>
<script>
$( "#trigger<?=$objResult["titolo"];?>" ).click(function() {

我不确定的是在 jQuery 脚本中使用 PHP“$”，这可能需要更多的调整。

【讨论】：

【解决方案3】：

这是一个可能的解决方案：

$("tr:has(.trigger):has(.dialog)").each(function() {
      var row = this
      var dialog = $(".dialog", row).dialog({
        autoOpen: false,
        position: 'center',
        title: 'definizione',
        draggable: true,
        width: 480,
        height: 380,
        resizable: true,
        modal: true,
        show: 'slide'
      });
      $(".trigger", row).click(function() {
        dialog.dialog("open");
      });

})

【讨论】：