Question

我有一个显示产品图像的网页。这些图像通过JSON格式通过HTTP请求来自服务器（图像不是特定的图像还是动态图像）。此JSON包含有关每个图像的信息。

当您使用Javascript ES6 Engine单击图像时，我想添加带有相应图像信息的对话框或弹出框。单击特定图像时，如何将图像信息从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!!");
}

点击图片-打开对话框或弹出窗口

2 个答案: