如何解决JavaScript:将 for 循环与单击处理程序事件结合使用循环跳到最后一项
我正在学习 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]);
}
});
解决方法
好的,兄弟。
我想那是因为你是编程新手?
你在点击事件上添加的函数没有按预期运行,因为它实际上设置了图像属性从 0,1,...,images.length - 1 但在你点击时并没有一一改变。
所以,你真正需要做的是修正'click'事件的函数,让它在你点击时一一改变。
我认为闭包会帮助你,或者你可以简单地使用一个全局变量来记录当前的图像索引。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。