访问动态创建的元素的问题

Question

我之前问过一个类似的问题，但那是关于与动态创建的元素相关的事件。 现在我只想更改 div 中动态创建的 img 标签的 class 列表。 这就是全部内容，我想创建一个 slider，其中包含使用从 JSON 文件获取的 src 和 alt 属性拍摄的三张图像。 Function 正常创建了所有三个，并且我想在除第一个之外的每个 img 上放置 displayNone class 。 另一个 function 应该每 3 秒循环检查所有动态创建的 img 标签，用于不包含 displayNone class 的标签，并添加到特定的 img ZA2F2ED4F8EBC2CBB4C21A29DC40AB61D 中删除他的 displayNone class。 我在 function 中创建了 var 来获取这些图像的数组。 有人知道解决方案是什么吗？

function showSlides(slidesJsonData){ // there is no problem with this function it generates img tags when window is loaded
    var writingSlides = "";
    for (slide in slidesJsonData){
        if(slide==0){
            writingSlides += `<img src="${slidesJsonData[slide].src}" alt="${slidesJsonData[slide].alt}"/>`;
        }
        writingSlides += `<img class="displayNone" src="${slidesJsonData[slide].src}" alt="${slidesJsonData[slide].alt}"/>`;
    }
    document.querySelector("#slider").innerHTML=writingSlides;
}
function slideShow(){
    var images = document.querySelectorAll("#slider img");
    images.forEach((img,index) => {
        if(index<images.length-1){
            if(!img.classList.contains("displayNone")){
                img.classList.add("displayNone");
                img[index+1].classList.remove("displayNone");
            }
        }
        else {
            img.classList.add("displayNone");
            document.querySelector("#slider img:first-of-type").classList.remove("displayNone");
        }
    });
    setTimeout("slideShow()",3000);
}
slideShow();
Now error is:
Uncaught TypeError: Cannot read property 'classList' of undefined
    at main.js:73
    at NodeList.forEach (<anonymous>)
    at slideShow (main.js:69)
    at <anonymous>:1:1

Answer 1

尝试在访问之前更新您的 sliderImages 变量，因为它可能是在内容加载完成之前创建的

Answer 2

您正在使用for in循环，该循环公开了与元素索引无关的元素集合的其他可枚举属性。 元素 collections 不是正确的 arrays 而是类似数组的对象

当您尝试将这些属性传递给循环内的sliderImages[sliderImage]时，它们不会返回具有classList属性的元素，并且没有contains引发错误的子属性。

使用基于length的 for 循环或for of循环或sliderImages.forEach(callback)

---

简单属性 output for in的例子

 const li = document.querySelectorAll('li') for (let x in li) { if (isNaN(x)) { console.log(`Property "${x}" is not an element index`) } else { console.log(`Key "${x}" is an element index`) } }

 <ul> <li></li> <li></li> </ul>

Answer 3

尝试这个

 var images = document.querySelectorAll("#slider img"); let cnt= 0 function slideShow(){ images[cnt].classList.toggle("displayNone") cnt++ if (cnt>= images.length) cnt = 0; images[cnt].classList.toggle("displayNone") } setInterval(slideShow,3000);