Question

我正在尝试创建一个JQuery对话框，其中包含特定项目的信息。

这是脚本：

  $(document).ready(function () {

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

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

 });

单击此图像时，应显示项目信息：

<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>
  </tr>
</c:forEach>

这是应该存储在对话框中的div

<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循环中，当创建对话框的链接时，执行以下操作：

<td width="150px"><a href="#" class="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>

如何将数据导入Jquery对话框？

1 个答案: