Question

我正在尝试使用jquery对话框，但它似乎只适用于第一个项目（只有第一个项目打开）

这是脚本：

   $(document).ready(function () {

            $("#dialog-form").dialog({
                autoOpen: false,
                height: 500,
                width: 400,
                modal: true
            });

        $("#open").click(function(){
           $("#dialog-form").dialog("open");
        });

     });

HTML代码段：

     <c:forEach var="item" items="${menuList}">
                        <tr>
                            <td width="150px"><a href="#" id="open"><img src="imageGetter?item_id=${item.idItem}" width="100px" height="60px" /></a></td>
                            <td width="200px">${item.itemName}</td>
                            <td width=200px">${item.description}</td>
                            <td width="150px">${item.price}</td>     
                        </tr>
            </c:forEach>

   <div id="dialog-form" title="title1">

        <img src="imageGetter?item_id=${item.idItem}" width="100%" height="50%" />
        <h3>Name: ${item.itemName}</h3>
        <h3>Description: ${item.description}</h3>
        <h3>Price: ${item.price}</h3>

    </div>

您认为这是什么问题？

Answer 1

如果“仅打开第一个”，则表示每次单击时都会出现对话框，但它始终包含“第一个”信息...我会说这是因为您只创建了一个对话框形式，在你的foreach循环之外。我甚至不确定你的对话框中是否显示了适当的值，因为你在对话框中填充的值也来自你的for循环，当你创建对话框时，你不在其中。

我会通过以下方式解决这个问题：

在你的foreach循环中，当创建对话框的链接时，执行以下操作：

<td width="150px"><a href="#" id="open" data-name="${item.itemName}" data-desc="${item.description}" data-price="${item.price}"><img src="imageGetter?item_id=${item.idItem}" width="100px" height="60px" /></a></td>

然后在你的javascript中将其更改为：

   $(document).ready(function () {

            $("#dialog-form").dialog({
                autoOpen: false,
                height: 500,
                width: 400,
                modal: true
            });

        $("#open").click(function(){
           var dataAttr = $(this).data();
           $('#spanDataName').html(dataAttr.name);
           $('#spanDataDes').html(dataAttr.description);
           $('#spanDataPrice').html(dataAttr.price);
           $("#dialog-form").dialog("open");
        });
   });

当你进行对话标记时：

<div id="dialog-form" title="title1">
    <img src="imageGetter?item_id=${item.idItem}" width="100%" height="50%" />
    <h3>Name: <span id="spanDataName"></span></h3>
    <h3>Description: <span id="spanDataDesc"></span></h3>
    <h3>Price: <span id="spanDataPrice"></span></h3>
</div>

Answer 2

您似乎有多行具有相同ID open的表格，因此如果您点击ID为first element的{{1}}，则会打开该对话框。你必须将id改为class

尝试将其更改为类

open

并在该类上附加click事件。

<a href="#" class="open">

Jquery对话框只打开一次

2 个答案: