无法使用javascript获取数组中当前单击元素的索引答案

【问题标题】：can't get index of current clicked element in array using javascript无法使用javascript获取数组中当前单击元素的索引
【发布时间】：2019-09-25 18:11:44
【问题描述】：

这是我的 HTML 代码

var link = document.getElementsByClassName("link");
for (i = 0; i < link.length; i++) {
  link[i].addEventListener("click", click);

  function click() {
    console.log(link.indexOf(this));
  }
}

<div class="links">
  <ul>
    <li>
      <div class="hole-counter"><span></span></div><a class="link">Home</a>
    </li>
    <li>
      <div class="hole-counter"><span></span></div><a class="link">About</a>
    </li>
    <li>
      <div class="hole-counter"><span></span></div><a class="link">Gallery</a>
    </li>
    <li>
      <div class="hole-counter"><span></span></div><a class="link">Contact</a>
    </li>
  </ul>
</div>

这是javascript代码

我在控制台中收到此错误未捕获的 TypeError：link.indexOf 不是 HTMLAnchorElement.click (index.html:97) 处的函数

【问题讨论】：

HTMLCollections 不是数组。您必须先将它们转换为数组，然后才能对它们使用数组方法。
Result of `document.getElementsByClassName` doesn't have array methods like `map` defined, even though it is an array的可能重复
es6 = var link = [...document.getElementsByClassName('link')] 或仅使用 Array.from
谢谢，现在可以使用了

标签： javascript

【解决方案1】：

您的链接变量不是数组，因此您不能在其上调用 indexOf()。您必须首先将链接转换为数组。 var link = Array.from(document.getElementsByClassName("link"));

【讨论】：

【解决方案2】：

你代码中的链接变量是HTMLCollection，在使用indexOf之前需要将其转换为数组

你可以这样做

const links = [...document.getElementsByClassName("link")];
links.forEach(link => link.addEventListener("click", click));

function click() {
  console.log(links.indexOf(this))
}

【讨论】：

【解决方案3】：

链接变量是一个类似数组的元素，你需要先把它转换成一个数组：

var link = document.getElementsByClassName("link");
for (i = 0; i < link.length; i++) {
    link[i].addEventListener("click", click);
}

function click() {
    console.log(Array.from(link).indexOf(this));
}

【讨论】：

【解决方案4】：

您的链接变量只是一个变量，indexOf 函数专门用于数组。因此，您应该首先将变量转换为数组。您可以通过将其声明为数组或之后将其转换为数组来做到这一点。

【讨论】：