时间戳

首页 > 解决方案 > 模态图像功能仅显示数据库中所有其他 div 的第一张图像

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

问题描述

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

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

标签： javascriptphphtmlmodal-dialog

解决方案

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

推荐阅读