1

名前、説明、画像を含む行がデータベースにいくつかあります。

私がやろうとしているのは、これらのレコードを HTML リストに表示することです。このリストには、クリックすると jQuery ダイアログが開き、その中に画像が表示される「リンク/ボタン」があります。

これまでのところ、オブジェクトをパーシャルに渡すレコードをループしています。パーシャルには、単に画像を表示する div が含まれています。

私はこれまでに持っています：

editSuccess.php

 $( ".image" ).dialog({
    autoOpen: false,
    height: 1000,
    width: 1000,
    position: [130, -100],
    modal: true,
    buttons: {
    Close: function() {
        $( this ).dialog( "close" );
    }
    },
    close: function() {
    }
 });

 $(".view-image" )
        .button()
        .click(function() {
            $( ".image" ).dialog( "open" );
});

<?php foreach($items as $item): ?>
    <div class="item">
        <?php echo $item->getName(); ?>
        <?php include_partial('templates/editTemplate', array('item'=>$item)); ?>
        <button class="view-image">View</button>
    </div>
<?php endforeach; ?>

_editTemplate.php

<div class="image">
    <?php echo $item->getImage(); ?>
</div>

問題は、出力されるレコードが 10 あることです。[表示] ボタンをクリックすると、10 個の項目のそれぞれについてダイアログが開きます。

「ビュー」をクリックすると、その実際のレコードのダイアログのみが開く方法はありますか?

4

2 に答える 2

1

jQuery 関数を次のように変更する必要があります。

$(".view-image" ).button().click(function() {
    $(this).parent().find(".image").dialog("open");
});
于 2013-01-23T13:38:47.337 に答える
0

あなたのコードはほとんどモーダルを呼び出して、を持っているすべてのクラスを開きますimage。代わりに、どの特定のコンテキストimageを開きたいかを指定する必要があります。

<script>
$(function() {

    /** Modal dialog */
    var dialog = function (content) {
        var modal;
        if (!$('#modal').length) {
            $('body').append($('<div id="modal"></div>'));
            $(document.body).append(modal);         
        }
        modal = $('#modal');
        modal.dialog({
            autoOpen: true,
            height: 1000,
            width: 1000,
            position: [130, -100],
            modal: true,
            buttons: {
                Close: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {}
        });
        modal.html(content);
   };

   $('.view-image').click(function(e) {
      // Call the dialog and pass the content of the image class.
      dialog($(".image", $(this).parent('.item')).html());

      return false;   
   });

});
</script>

...Your PHP code follows.

jQuery UIダイアログ固有の問題を解決するために、jsFiddleがダイアログの問題に対処します（概念的に）。jsFiddle

これをPHPアプリと統合する方法について、上記の回答を更新しました。

于 2013-01-23T13:50:51.387 に答える