获取在 JavaScript 中单击的 class 的索引。没有 jQuery

Question

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

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

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

我觉得应该很简单吧？

Answer 1

没有 "easy" 办法；也就是说，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));
});

获取在 JavaScript 中单击的 class 的索引。没有 jQuery

Get index of class clicked in JavaScript. No jQuery

javascript

mouseevent