0

我正在尝试针对表格中的每一行放置一个 jquery 模态弹出按钮，这意味着一个页面上最多可以有 25 个按钮 - 每个按钮需要弹出一个对话框，其中包含根据行的 id 从数据库中提取的不同内容。

如果按钮在循环外的页面上显示一次，我可以让按钮工作并正确显示内容，但是一旦我将它放入循环中，它就会开始表现得很奇怪。当我单击任何按钮时，它会显示包含动态内容的弹出窗口，但单击退出会循环循环并显示所有动态内容，直到显示所有行。

例如，如果我有 4 行，当我单击按钮一时，我会弹出一个包含第一行内容的弹出窗口，但如果我单击退出，则会显示第二行的内容，依此类推，直到它们全部显示出来，这显然是不正确的.

我怎样才能得到它，所以它只显示一次弹出窗口并且只显示相应的 id 而不是全部？

<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 100000;
$(function() {
    $( ".jui-dialog" ).dialog({
        autoOpen: false,
    modal: "true"
    });

    $( ".button" ).click(function() {
        $( ".jui-dialog" ).dialog( "open" );
        return false;
    });
});
</script>


<begin loop>

<button class="button">Popup</button>
<div class="jui-dialog">
    <div class="jui-dialog-inner">
        <p><?=$id?></p>
    </div>
</div>

<end loop>
4

2 回答 2

2

当你写这行时：

$( ".jui-dialog" ).dialog( "open" );

这意味着，“抓取任何包含类 jui-dialog 的元素并打开它们。”

你正在循环这个所以我假设你有多个带有类 jui-dialog 的 div。相反，您可能的意思是这样写：

$( this ).next( ".jui-dialog" ).dialog( "open" );
于 2012-10-10T09:08:57.660 回答
2

如果您不想更改您的 dom，您可以选择按钮之后的对话框：

$( ".button" ).click(function() {
    $(this).parent().children().eq($(this).index()+1).dialog( "open" );
    return false;
});

但是给你的按钮一个 id 会更干净：

<button class="button" id="<?=$id?>">Popup</button>
<div class="jui-dialog" for="<?=$id?>">
    <div class="jui-dialog-inner">
        <p><?=$id?></p>
    </div>
</div>

$( ".button" ).click(function() {
    $('.jui-dialog[for="'+this.id+'"]').dialog( "open" );
    return false;
});
于 2012-10-10T09:02:32.640 回答