javascript - jQuery对话框的问题

我正在对网站进行重新设计，现在我的目标是用新窗口（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
            })
        })
    })();

任何想法为什么会这样？

最佳答案

这仅仅是因为您不能使用相同的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
            })
        })
    })();

关于javascript - jQuery对话框的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28151422/