Question

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

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

例如，如果我单击按钮1时有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>

Answer 1

如果您不想更改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;
});

Answer 2

当你写下这一行时：

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

这意味着，“抓住任何包含类jui对话框的元素并打开它们。”

你正在循环这个，所以我假设你有多个div与类jui对话框。相反，你可能想写：

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

同一页面上的多个jquery按钮表现得很奇怪

2 个答案: