Question

JS forEach 数组滑块

2019-09-16

468

javascript arrays

我编写了一个函数，当我点击文章中的任何图像时，它会将其放置在滑块中。

Object.keys(bgImages).forEach(function(key){
                bgImages[key].getElementsByTagName('img')[0].onclick = function() {                        modal.style.display = "block";
                        modalImg.src = bgImages[key].getElementsByTagName('img')[0].src;
                    }
                    arrowLeft.onclick = function (){
                        modalImg.src = bgImages[key + 1].getElementsByTagName('img')[0].src;
                    }
              })

现在我需要添加箭头，使用该函数，当我点击时，集合中的下一张或上一张图片会打开

当我尝试使用 bgImages[key + 1].getElementsByTagName('img')[0].src 获取下一张图片时，出现错误 Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined

变量 bgImages 返回 HTMLCollection

请告诉我我做错了什么。我找到了类似的帖子，但他们的方法不适用于我的例子。

bgImages 的结构

HTMLCollection(5) [figure.figure.figure--over-9000, figure.figure.figure--over-9000, figure.figure.figure--over-9000, figure.figure.figure--over-9000, figure.figure.figure--over-9000]
0: figure.figure.figure--over-9000
1: figure.figure.figure--over-9000
2: figure.figure.figure--over-9000
3: figure.figure.figure--over-9000
4: figure.figure.figure--over-9000
length: 5
__proto__: HTMLCollection

bgImages[key] 的结构： <figure class="figure figure--over-9000"></figure>

当我点击箭头时，我应该从当前集合项目中获取下一个项目

UPD：

我解决了问题（ bgImages[key + 1] 返回 bgImages[01] ，但还有一件事：照片只切换一次

Answer 1

bgImages[key + 1]

添加类似

var nextImg = bgImages[key + 1];
if(nextImg){

的检查>

当您的 key 指向最后一个元素时， key + 1 将导致未定义。

Answer 2

Object.keys(bgImages).forEach(function(key){
                bgImages[key].getElementsByTagName('img')[0].onclick = function() {                        modal.style.display = "block";
                        modalImg.src = bgImages[key].getElementsByTagName('img')[0].src;
                    }
                    let currentKey = Number(key);
                    arrowLeft.onclick = function (){
                        currentKey += 1;
                        modalImg.src = bgImages[currentKey].getElementsByTagName('img')[0].src;
                    }