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

【问题标题】：Problem with access to dynamically created elements访问动态创建的元素的问题
【发布时间】：2021-05-18 10:16:00
【问题描述】：

我之前问过一个类似的问题，但那是关于与动态创建的元素相关的事件。现在我只想更改 div 中动态创建的 img 标签的类列表。这就是全部内容，我想创建一个滑块，其中包含三个使用从 JSON 文件中获取的 src 和 alt 属性拍摄的图像。函数正常创建所有三个，因为我想在每个 img 上放置 displayNone 类，除了第一个。另一个函数应该每 3 秒在一个循环中检查所有动态创建的 img 标签，用于不包含 displayNone 类的标签，并将其添加到特定的 img 类 displayNone 然后获取下一个，或者如果它是最后一个，则 img 和删除他的 displayNone 类。我在函数内部创建了 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

【问题讨论】：

欢迎来到 Stack Overflow！请访问help center，使用tour 了解内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。
如果您的第一个 console.log 给出了一个空数组，那么您设置 sliderImages 变量的方式就有问题，并且在该变量正常工作之前，任何其他代码都无关紧要。
添加图片后需要致电var sliderImages = document.querySelectorAll("#slider img");
我几乎可以保证你的第一行代码在元素出现在页面之前就已经运行了
它们是动态创建的这一事实与此无关 - 只是 when （如果它们不在 #slider 中，可能还有 how ) 或者如果您有多个#slider。 sn-p 中的minimal reproducible example 足以清楚地表明这个问题。

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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>

【讨论】：

【解决方案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);

【讨论】：