单击多个元素相同的类名

Question

我有多个具有相同类名的 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类的锚元素
2. document.getElementsByClassName返回一个节点集合。您必须遍历集合才能绑定单击事件。您可以Array.prototype.forEach.call(<NodeCollection>, function(element) { ... })用来遍历您的节点集合
3. 不要.onclick用于绑定单击事件，因为这会覆盖任何onclick处理程序。你应该.addEventListener('click', function() {...})改用
4. 为了访问data-wow属性，请使用HTML5 datasetAPI

考虑到这一点，这里是一个概念验证示例：

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>