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

【问题标题】：modal image function only show the first image from the database for all other divs模态图像功能仅显示数据库中所有其他 div 的第一张图像
【发布时间】：2020-05-04 07:26:15
【问题描述】：

所以我想让每个缩略图都显示自己的大细节图像。在使用 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";

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

【问题讨论】：

那么您是在循环中创建此 HTML 吗？那么你就违反了 ID 在 HTML 文档中必须是唯一的基本规则。

标签： javascript php html modal-dialog

【解决方案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 或其他东西设置样式，请改用类（也可以使用部分字符串匹配）。

【讨论】：