时间戳

首页 > 解决方案 > javascript：获取存储在图像数组中的单击图像的索引

javascript - javascript：获取存储在图像数组中的单击图像的索引

问题描述

我制作了一个弹出图像滑块，当单击该图像的缩略图时，会弹出带有该图像的弹出窗口。我需要找到一种方法来获取我的“imgArr”中单击图像的索引，然后在该当前索引处开始幻灯片。我的代码使滑块从当前单击的图像返回到索引 1 然后 2 依此类推...无论我单击什么图像，它总是从索引 0 开始

额外信息：我的 imgArr 变量根据当前所在的页面更改其数组。所以还有 3 个其他变量包含不同类型的图像，但这些变量会更新为 imgArr，因此 javascript 可以决定在哪里发布图像。

密码笔

 let imgArr;
 var current = 0;

 rightArrow.addEventListener('click', slideRight);

 function slideRight(){
   popImg.setAttribute('src', imgArr[current + 1]);
   current++;
   if(current > imgArr.length){
     current = 0;
   }
 }

标签： javascriptimagesliderindexof

解决方案

据我了解，您有一组图像，并且您希望返回单击的图像的索引。

不幸的是，我现在不在家进行测试，但我相信它应该可以满足您的需求。

var images = document.getElementsByTagName('img');
for(var i = 0; i < images.length; i++) {
    images[i].onclick = function (img) {
        var index = imgArr.findIndex(image => image === img.src);
        console.log(index + ' clicked.');
    }
}

推荐阅读