javascript - 如何获取 JavaScript 中单击的元素的类索引

Question

这个问题已经有答案了:

How to add a onclick event to an element using javascript (7 个回答)

已关闭 3 年前。

先看代码会更容易解释。这是 HTML:

<img class="resizableImage" src="PATH">
<img class="resizableImage" src="PATH">

这是 Javascript:

var img = document.getElementsByClassName("resizableImage");
img.onclick = function(){
//Do Stuff To The Image Clicked
}

上面的脚本不起作用，因为变量 img是一个数组，所以 img.onclick不起作用。我需要指定索引(如 img[0].onclick )。但是如何获得点击图像的索引呢？

我知道我可以在每个图像上放置唯一的 id，并检查每个图像被单击的时间，但有些页面有 1 个图像，有些页面有 20 个图像。我希望脚本是通用的。无论点击什么图像，都需要调用相同的函数。我可以获取单击图像的索引，将其存储在变量中，然后在上面的脚本中使用它吗？我非常喜欢纯 Javascript。

谢谢。

Answer 1

希望这对您有帮助!

const imgs=document.querySelectorAll("img.resizableImage");
for(let i=0;i<imgs.length;i++){
  imgs[i].onclick=function(){
    alert( "My Index is : " + i );
  }
}

<img class="resizableImage" src="PATH">
<img class="resizableImage" src="PATH">
<img class="resizableImage" src="PATH">