图像单击 - 打开对话框或弹出窗口

Question

我有显示产品图像的网页。这些图像来自服务器（图像不是特定图像或动态图像），以JSON格式使用HTTP请求。此JSON具有有关每个图像的信息。

使用JavaScript ES6引擎单击图像时，我想添加对话框或弹出框。单击特定图像时，我如何将图像信息从JSON传递给对话或弹出窗口。

Answer 1

让我们假设您写了

<img id="xyz" data-id="alpha" src="http://some.url/image.jpg" />

然后您可以检索id值写作

document.getElementById("xyz").dataset.id

在您的情况下，由于您想在单击图像时使用该值，因此您可以使用onClick事件处理程序，例如：

<img data-id="alpha" src="http://some.url/image.jpg" onClick="someFunction();" />

，然后有

someFunction = (ev) => {
    let id = ev.target.dataset.id;
    // Put here the code to open you dialog or popup
    // based on the data retrieved by using the id
}

Answer 2

这也有效，假设您使用了@ed

提到的相同图像元素

<img id="xyz" data-id="alpha" src="http://some.url/image.jpg" />

然后放入以下JS以通过ID选择图像：

const image = document.querySelector("#xyz");

然后使用以下代码"收听"以单击图像：

image.addEventListener("click", popup);

然后使用以下代码创建弹出窗口：

function popup() {
alert("Hello! I am a popup!!");
}