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

Question

I have web page which display product images. These images are coming from server (images are not specific or dynamic images ) over HTTP request in JSON format. This JSON has information about each image.

I want to add dialog or popup box with respective image information when you click on image with Javascript ES6 Engine. How I can pass image Information from JSON to dialog or popup when I click a specific image.

Answer 1

Let's assume you wrote

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

Then you may retrieve the id value writing

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

In your case, since you want to use the value when the image is clicked, you may use an onClick event handler, like this:

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

and then have

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

This also works assuming you used the same image element mentioned by @Ed

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

Then drop in the following JS to select the image by the ID:

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

Then use the following code to "listen" for a click on the image:

image.addEventListener("click", popup);

Then use the following code to create a popup:

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