0

テーブルの各行に対してjqueryモーダルポップアップボタンを配置しようとしています。つまり、1ページに最大25個のボタンが存在する可能性があります。各ボタンは、行のIDに基づいてデータベースから取得されたさまざまなコンテンツを含むダイアログをポップアップする必要があります。

ボタンがループの外側のページに一度表示されれば、ボタンを機能させてコンテンツを正しく表示できますが、ループに入れるとすぐに非常に奇妙な動作を開始します。いずれかのボタンをクリックすると、動的コンテンツを含むポップアップが表示されますが、[終了]をクリックすると、ループが循環し、すべての行が表示されるまですべての動的コンテンツが表示されます。

たとえば、ボタン1をクリックしたときに4行ある場合、1行目のコンテンツを含むポップアップが表示されますが、[終了]をクリックすると、2行目のコンテンツが表示され、すべてが表示されるまで続きます。これは明らかに正しくありません。 。

ポップアップが1回だけ表示され、すべてではなく対応する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

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 に答える
2

あなたが行を書くとき：

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

つまり、「クラスjui-dialogを含む要素をすべて取得し、それらを開きます」ということです。

あなたはこれをループしているので、クラスjui-dialogを持つ複数のdivがあると思います。むしろ、あなたはおそらく書くことを意味します：

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