在灯箱中显示数据

Question

我想在灯箱中点击红色圆圈图像显示相关数据，但是当我点击它总是显示表格中第一条记录的灯箱中的数据我想显示点击的关注记录，我的代码在这里JavaScript我写了这些代码行

 <script>
 function manageLightbox(visibility,id) {
 document.getElementById('overlay').style.display = visibility;
 document.getElementById('content').style.display = visibility;
 }
 </script>

我在我的html中调用了这个函数

<a href="#"><img src="images/core/icon16/zoom.png" title="View" onClick="return manageLightbox('block','<?php echo $res['id']?>');" /></a>

我的灯箱的html就在这里

<div id="content" class="content">
<a href = "javascript:void(0)" onClick="return manageLightbox('none')">
<img  src="images/images1.jpeg" style="width:25px; height:25px; float:right"/></a>
<br/>
<center>
    <table>
        <tr>
           <td>Product_ID</td>
           <td><input type="text" name="product_id" value="<?php echo $row['id']; ?>"/></td>
        </tr>
        <tr>
            <td>Name</td>
            <td><input type="text" name="name" value="<?php echo $row['name']; ?>"/></td>
        </tr>
      //and all other fields in light box ....
    </table>
</center>
</div>
<div id="overlay" class="overlay" onClick="return manageLightbox("")></div>

Answer 1

首先，您在通话中使用$ res，在您的视图中使用$ row，可能是错误的名字？ 第二，你使用AJAX吗？使用Jquery，您可以轻松进行AJAX调用，并将数据放入您想要的位置。 所以： 使用$ res [“id”]作为所需数据的数据，（例如返回表格）并将其包含在div内容中。

您只看到第一个的原因是因为您分配了多个具有相同名称的div，javascript将返回具有给定名称的第一个元素。通过使用AJAX，您可以拨打电话，信息将包含在您查看的唯一div“内容”中。

示例：

<script>
$(".link_zoom").click(function(){ //add class to a href: class='link_zoom', when click, trigger event
   $.ajax({
      type: 'POST'
      url: "someaction.do.php",
      data: "id=" + $(this).attr("id"), //add to the a href: id='<?php echo $res["id"]; ?>'
      dataType: "html",
      success: function(html) 
      { 
        $(".content").html(html); //will add the html to the content div
      }
   });
});
</script>