JS Сравнение id и вывод подходящей картинки

Question

Есть галерея маленьких картинок. При клике на каждую должно появляться ее увеличенное изображение.

<ul id="list">
    <li class="list-item" data-id='1'><img id="1" src="./task-2/1.jpg" alt=""></li>
    <li class="list-item" data-id='2'><img id="2" src="./task-2/2.jpg" alt=""></li>
    <li class="list-item" data-id='3'><img id="3" src="./task-2/3.jpg" alt=""></li>
</ul>

Я реализовал отображение id li.


let parag = document.createElement('div');
$('.list-item').click((event) => {
    const imgId = event.currentTarget.getAttribute('data-id');
    parag.innerHTML = imgId;
    document.getElementById('modalContent').insertAdjacentElement('afterbegin', parag)
});

$('.close').click((e) => {
    parag.innerHTML = " ";})

Как отобразить вместо цифры картинку с таким же id?

Answer 1

Так?

$('.list-item').click((event) => {
    // const imgId = event.currentTarget.getAttribute('data-id');
    const imgSrc = event.currentTarget.querySelector('img').getAttribute('src');
    parag.innerHTML = `<img src="${imgSrc}">`;
    document.getElementById('modalContent').insertAdjacentElement('afterbegin', parag)
});

БЛОГ НА HUSL

JS Сравнение id и вывод подходящей картинки

Ответы (1 шт):