Question

我正在为一个网站进行重新设计，现在我的目标是用一个新窗口（jQuery）替换打开某个窗口的旧方法。这就是它之前的样子：http://i.imgur.com/cLCMB5m.png这就是它现在的样子：http://i.imgur.com/8LnLL24.png。一切看起来都不错，但是有问题。 jQuery对话框仅适用于每个页面中的第一个项目。如果我按下另一个项目，而不是第一个项目，则没有任何反应。此外，如果我继续打开jQuery对话框，它会逐个显示页面中的所有项目（示例：我按下第一个项目，然后打开jQuery对话框，其中包含第一个项目的内容，我按下第一个项目再次，但现在它显示第二个项目的内容，依此类推，它由于某种原因一个接一个地显示它们。

php代码：

        //                                     SHOP ITEM LARGE
    //This is how it worked before
//  print '<a href="';
//  print "javascript:regular('pages/item_large.php?shop=".$item->webshopMenu."&amp;nr=".$item->id."');";
//  print '"><img style="margin-top:5px;margin-bottom:0; padding-bottom:0px;" border="0" src="'.$img.'" alt="'.$item->Naam.'" '.$image_size.'></a>';
//  print '<br><small>Artikelnr. : '.$item->Artikelnr.'</small></div>'."\n";
    //This is how I'm trying to do it now
    print '<a id="save" href="';
    print '"><img style="margin-top:5px;margin-bottom:0; padding-bottom:0px;" border="0" src="'.$img.'" alt="'.$item->Naam.'" '.$image_size . "</a>";
    print '<br><small>Artikelnr. : ' . $item->Artikelnr . '</small></div>' . "\n";
    ?>
    <div style="display: none" id="dialog">
        <?php
        echo "<iframe src='pages/item_large.php?shop=" . $item->webshopMenu . "&amp;nr=" . $item->id . "'" . "width='100%' height='100%' frameborder='0'></iframe>"
        ?>
    </div>

jQuery代码：

    (function() {
        $('#save').click(function(event) {
            event.preventDefault();
            $('#dialog').dialog({
                modal: true,
                scrollable: false,
                draggable: false,
                resizable: false,
                width: 450,
                height: 445
            })
        })
    })();

为什么会发生这种情况？

Answer 1

这只是因为您无法制作具有相同id的多个HTML项目，并希望此功能正常运行。给它们不同的id或者使这个基于CSS类的名称。

例如，您可以将第一个元素设为id="save1"，将第一个元素设为id="dialog1"

基于类的解决方案是：提供链接class="save"和对话框class="dialog"，而不是id。然后javaScript就像：

将<a>和对话框div放在同一部分<div class="section">中，这样他们就可以拥有相同的父元素。然后：

(function() {
        $('a.save').click(function(event) {
            event.preventDefault();
            $(this).parents(".section:first").find(".dialog").dialog({
                modal: true,
                scrollable: false,
                draggable: false,
                resizable: false,
                width: 450,
                height: 445
            })
        })
    })();

Answer 2

使用类而不是id。使用类class="saveBtn"之类的保存按钮和class="dialog"之类的对话框。然后将保存按钮和对话框包含在类似class="section"的类的容器中。那么你可以使用jquery找到相对于彼此的元素的潜力，如下所示：

$('.saveBtn').on('click', function(e) {
    e.preventDefault();
    var dialog = $(this).closest('.section').find('.dialog'); // this will find the dialog that is in the same section as the save button you just clicked on.

    //then you do whatever else of the code you want here.
});

此解决方案允许您编写清理程序，而无需尝试管理ID和随机索引以获得正确的对话框。

jQuery对话框的问题

2 个答案: