Question

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

我想要做的是将这些记录显示在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个项目中的每一个打开一个对话框。

有没有办法点击“查看”它只打开该实际记录的对话框？

Answer 1

您应该将jQuery函数更改为：

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

Answer 2

您的代码几乎调用模式来打开每个具有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应用程序集成。

特定数据库记录的jQuery对话框

2 个答案: