javascript - JavaScript：将 for 循环与单击处理程序事件结合使用。循环跳到最后一项

Question

我正在学习 JavaScript 并尝试使用创建图片轮播。我有一个附加到单击处理程序事件的按钮和一个用于将图像插入空 HTML IMG 元素的 for 循环。图像和 alt 值在包含图像和 alt 数组的对象中排序。不是每次点击一次移动一个图像，而是直接跳到最后一项？谁能帮我解决我哪里出错了？

const images = {  
    
   image: ["images/alice.jpg", "images/basketball.JPG", "images/butterfly.JPG", "images/colour.JPG", "images/david.JPG", "images/dope.JPG", "images/fire.JPG", "images/friday.JPG", "images/link.jpg", "images/lion.jpg", "images/rose.JPG", "images/skull.JPG"  ],
    alt: ["alice in wonderland", "basketball", "bufferfly and skull", "colour", "david attenbourgh", "dope", "fire", "friday the 13th", "link", "lion", "rose", "skull"]

};

const back = document.getElementById("back");
const next = document.getElementById("next");
const image = document.getElementById("image");

image.setAttribute("src", images.image[0]);
image.setAttribute("alt", images.alt[0]);

next.addEventListener("click", () => {

   for ( let i = 0; i < images.image.length; i++ ) {
        image.setAttribute("src", images.image[i]);
         
    }
    for ( let i = 0; i < images.alt.length; i++ ) {
        image.setAttribute("alt", images.alt[i]); 
    }
});

标签： javascriptfor-loopobjectevent-handlingclick

Answer 1

OK哥。

我认为那是因为您是编程新手？

您在单击事件上添加的功能未按预期运行，因为它实际上将图像属性设置为 0, 1, ..., images.length - 1 但单击时不会一一更改。

因此，您真正需要做的是更正“单击”事件的功能，并在您单击时使其一一更改。

我认为闭包会对您有所帮助，或者您可以简单地使用全局变量来记录当前图像索引。