1

我的数据库中有一些行，包括名称、描述和图像。

不过，我想做的是在 HTML 列表中显示这些记录，该列表有一个“链接/按钮”，当我单击它时，它会打开一个 jQuery 对话框，其中包含图像。

到目前为止，我正在做的是循环遍历将对象传递给部分的记录。部分包括一个简单地显示图像的 div。

我到目前为止：

编辑成功.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 回答