Vanilla Javascript: .forEach L oop Не применяется прослушиватель событий - PullRequest
Новая
       109

Vanilla Javascript: .forEach L oop Не применяется прослушиватель событий

0 голосов
/ 13 июля 2020

Ищу поддержку, почему этот l oop не применяет eventlisteners к 2 элементам изображения.

HTML: 

<img src="video-embed.jpg" alt="text content">
<img src="video-embed-copy.jpg" alt="text content">

JAVASCRIPT: 

let videoThumbnails = document.querySelectorAll('img[src*="video-embed"]');
    
function toggleGalleryModal(modal) {
    console.log(clicked);
    document.getElementById(modal).classList.toggle("show-modal");
}
    
function buildGalleryModals() {
    
    videoThumbnails.forEach(function (thumbnail, index) {
        let modalID = 'vid-gallery-modal-' + index,
            altText = thumbnail.alt;
    
        thumbnail.addEventListener('click', function (event) {
            console.log('thumbnail[i]: ' + index);
        });
    
        document.body.innerHTML += '<div id="' + modalID + '" class="vid-gallery-modal"><div class="modal-content"><span class="close-button">×</span>' + altText + '</div></div>';
    });
}
    
buildGalleryModals();

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Проблема в том, что после настройки обработчиков кликов вы перезаписываете document.body.innerHTML новыми элементами HTML и стираете только что настроенные элементы.

Вместо этого вставляйте новые HTML в часть документа, но не document.body. 

let videoThumbnails = document.querySelectorAll('img[src*="video-embed"]');

function toggleGalleryModal(modal) {
    console.log(clicked);
    document.getElementById(modal).classList.toggle("show-modal");
}

function buildGalleryModals() {

    videoThumbnails.forEach(function (thumbnail, index) {
        let modalID = 'vid-gallery-modal-' + index, 
            altText = thumbnail.alt;

        thumbnail.addEventListener('click', function (event) {
            console.log('thumbnail[i]: ' + index);
        });

        document.getElementById("output").innerHTML += '<div id="' + modalID + '" class="vid-gallery-modal"><div class="modal-content"><span class="close-button">×</span>' + altText + '</div></div>';
    });
}

buildGalleryModals();
<img src="video-embed.jpg" alt="text content1">
<img src="video-embed-copy.jpg" alt="text content2">
<div id="output"></div>
0 голосов
/ 14 июля 2020

Назначения внутри forEach () не изменят исходные элементы массива (например, videoThumbnails), поскольку они работают с копией элементов массива, а не с самими элементами массива: 

myArray = [1,2,3,4,5]

// try to assign new value to array elements using forEach
myArray.forEach(e => {
            e = '0';
            console.log(e);
        }
    )

// see that elements in original array are unchanged
myArray.forEach(e => {
            console.log(e);
        }
    )
...