訪問動態創建的元素的問題

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);