javascript - 有没有办法使用 Javascript 显示此幻灯片上的最后一张图片？

Question

到目前为止，我的代码循环了 3/4 或 2/3 个项目。这些项目在一个数组中。最后一张图片显示：“未捕获的 TypeError：无法读取 HTMLElement 处未定义的属性 'classList'”。显示图片和关闭图片有两个类：分别为“on”和“off”。HTML 代码：

            <div class="first off">
                <img src="https://c.tadst.com/gfx/750w/sunrise-sunset-sun-calculator.jpg?1" alt=""/>
            </div>

            <div class="second off">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSvLhLs2n6RpRIksOmhqH40yt88fgGcAC6uGlWENi3_WGWfXeoa&usqp=CAU" alt=""/>
            </div>

            <div class="thrird off">
                <img src="https://images.unsplash.com/photo-1512149448423-de868c37fbab?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" alt=""/>
            </div>

            <div class="last off">
                <img src="https://c.tadst.com/gfx/750w/sunrise-sunset-sun-calculator.jpg?1" alt="">
            </div>
        </section>

Javascript 代码：

var index = 0

arrow.addEventListener("click", ()=>{
    var divs = document.querySelectorAll("div");
    var slide = divs[index]
    index++

    if (index >= divs.length) {
        index = 0
        for (let i = 0; i <= divs.length; i++) {
            divs[i].classList.replace("on", "off")
        }
    }

    slide.classList.replace("off", "on")
    log(index + slide)
})

注意：我确实看过一些类似于这个问题（？）的问题，但它们是在 JQuery 中

谢谢您的帮助！

标签： javascripthtmlarraysloops

Answer 1

由于数组索引从零开始，您的for循环应该是：

for (let i = 0; i < divs.length; i++) {
    ...
}