模态图像功能仅显示数据库中所有其他div的第一张图像

Question

所以我想使每个缩略图图像都显示自己的大细节图像。在使用来自CSS的简单“活动”元素之前，我已经开始使用它了。但是现在我想尝试在模式框/图像中显示。因此，这是我的用于显示缩略图的html代码。

<div id="product-image" ><img id="product-thumbnail" src="<?php echo $row["image"]; ?>" onclick="openDetail()">
    <?php $hoverimg = $row["hover-img"]; ?>
    <span id="span-img"><img id="hover-img" src="<?php echo $hoverimg ?>"><span class="close">&times;</span></span>
</div>

通过单击“ img id =“ product-thumbnail”，我可以显示“ span”中的模式图像。但是当前的问题是我可以单击并显示每个“ img”中的span元素，但span- img甚至在其他产品缩略图上也一样。当我尝试在浏览器中检查每个span-img直接指向正确的src时，这使我开始质疑我的JS代码。这是我的脚本

function openDetail() {var img = document.getElementById("span-img");img.style.visibility = "visible";

任何帮助将不胜感激-谢谢

Answer 1

<div id="product-image_<?php echo $i; ?>" ><img id="product-thumbnail_<?php echo $i; ?>" src="<?php echo $row["image"]; ?>" onclick="openDetail()">
    <?php $hoverimg = $row["hover-img"]; ?>
    <span id="span-img_<?php echo $i; ?>"><img id="hover-img_<?php echo $i; ?>" src="<?php echo $hoverimg ?>"><span class="close">&times;</span></span>
</div>

ID必须是唯一的。如果要为div或其他样式设置样式，请改用类（也可以使用部分字符串匹配）。