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

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
}