Клик по изображению - открыть диалог или всплывающее окно

Question

У меня есть веб-страница, на которой отображаются изображения товара.Эти изображения поступают с сервера (изображения не являются конкретными или динамическими) по HTTP-запросу в формате JSON.Этот JSON содержит информацию о каждом изображении.

Я хочу добавить диалоговое окно или всплывающее окно с соответствующей информацией об изображении, когда вы нажимаете на изображение с Javascript ES6 Engine.Как я могу передавать информацию об изображении из JSON в диалоговое окно или всплывающее окно, когда я щелкаю определенное изображение.

Answer 1

Это также работает при условии, что вы использовали тот же элемент изображения, упомянутый @ Ed

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

Затем вставьте следующий JS, чтобы выбрать изображение по идентификатору:

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

Затемиспользуйте следующий код для «прослушивания» клика по изображению:

image.addEventListener("click", popup);

Затем используйте следующий код для создания всплывающего окна:

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

Answer 2

Предположим, вы написали

<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
}