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

【问题标题】：javascript: get index of image clicked that is stored in an array of imagesjavascript：获取存储在图像数组中的单击图像的索引
【发布时间】：2018-08-13 19:59:15
【问题描述】：

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

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

codepen

 let imgArr;
 var current = 0;

 rightArrow.addEventListener('click', slideRight);

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

【问题讨论】：

您的 codepen 示例引发错误。

标签： javascript image slider indexof

【解决方案1】：

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

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

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.');
    }
}

【讨论】：

关闭，但它记录 -1 点击每张图片。我只需要让 JavaScript 知道在单击的当前图像处向右滑动，而不是返回到该数组的索引 0 并在客户端单击右箭头时开始滑动。但是非常感谢
你能告诉我你的数组内容是什么样的吗？我的代码在数组中查找确切的 img src=""。如果它返回 -1，则意味着它没有找到任何匹配的东西。