javascript - 获取在 JavaScript 中单击的类的索引。没有 jQuery

Question

编辑:该建议指向一个 jquery 答案，我不想使用它。我可能没有很好地解释这一点。当您单击一个类(class)时，我想知道它是共享同名的所有类(class)中的哪一个。例如，如果页面上有 8 个类名为“mybutton”的按钮，当我单击其中一个按钮时，我想知道它是哪个索引，例如:mybutton[3]。

原帖:有没有一种简单的方法来获取您单击的类的索引？我似乎无法在 MouseEvent obj 中找到任何内容。我搜索了 stackoverflow/internet，但我能找到的似乎过于复杂、未得到解答或使用 jQuery。示例:

document.body.addEventListener('click',function(event){
        console.log(event.target.className);
        console.log(event.target.className.index??)`
    });

我觉得应该很简单，不是吗？

Answer 1

没有“简单”的方法可以做到；也就是说，DOM API 不会直接回答这类问题。但是，您可以简单地搜索与您想要的任何特征相匹配的元素列表，并查看您的元素与哪个元素相匹配:

function indexIn(selector, element) {
  var list = document.querySelectorAll(selector);
  for (var i = 0; i < selector.length; ++i)
    if (list[i] === element) return i;
  return -1;
}

然后您的处理程序可以查看被单击元素上的 .classList:

document.body.addEventListener('click',function(event){
  for (var i = 0; i < this.classList; ++i)
    console.log("index for class " + this.classList[i] + ": " +
      indexIn("." + this.classList[i], this));
});