javascript - 点击多个元素相同的类名

Question

这个问题已经有答案了:

What do querySelectorAll and getElementsBy* methods return? (12 个回答)

已关闭 4 年前。

我有多个具有相同类名的 html 元素，我想知道在纯 JavaScript 中单击了哪个元素

<a href="#" data-wow="1" class="wow">link a</a>
<a href="#" data-wow="2" class="wow">link a</a>
<a href="#" data-wow="3" class="wow">link a</a>

在 javascript 中，我尝试了很多解决方案，但我发现所有解决方案都仅适用于一个元素

到目前为止我写了什么

    var dd = document.getElementsByClassName('messages-email');

    dd.onclick() = function(ee){
      // if i clicked the first link i want to get data-wow which is 1
      // and if i clicked the third one i wanna get data-wow which is 3
      console.log('i want the clicked elemet attribute ')
    }

Answer 1

您的代码存在一些问题:

1. 没有属于 message-email 类的元素在你的标记中。我想当您尝试演示您的标记时，这只是一个错误，并且您使用 wow 引用 anchor 元素。类
2. document.getElementsByClassName返回一个 Node 集合。您必须迭代该集合才能绑定(bind)单击事件。您可以使用 Array.prototype.forEach.call(<NodeCollection>, function(element) { ... }) to iterate through your node collection
3. 请勿使用.onclick绑定(bind)点击事件，因为这将覆盖任何 onclick处理程序。您应该使用 .addEventListener('click', function() {...})相反
4. 为了访问data-wow属性，使用HTML5 dataset API

考虑到这一点，下面是一个概念验证示例:

var dd = document.getElementsByClassName('wow');

Array.prototype.forEach.call(dd, function(element) {
  element.addEventListener('click', function() {
    console.log('data-wow value is: ' + element.dataset.wow);
  });
});

<a href="#" data-wow="1" class="wow">link a</a>
<a href="#" data-wow="2" class="wow">link a</a>
<a href="#" data-wow="3" class="wow">link a</a>

奖励:如果您熟悉 ES2015(又名 ES6)，还有一种更简单的方法可以做到这一点:

const dd = document.getElementsByClassName('wow');

Array.from(dd).forEach(element => {
  element.addEventListener('click', () => {
    console.log('data-wow value is: ' + element.dataset.wow);
  });
});

<a href="#" data-wow="1" class="wow">link a</a>
<a href="#" data-wow="2" class="wow">link a</a>
<a href="#" data-wow="3" class="wow">link a</a>