点击多个元素相同的类名[复制]

Question

这个问题已经在这里有一个答案：

• What do querySelectorAll and getElementsBy* methods return? 9个回答

我有相同的类名称的多个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返回节点集合。你必须通过收集，以便将click事件绑定到迭代。您可以使用Array.prototype.forEach.call(<NodeCollection>, function(element) { ... }) to iterate through your node collection
3. 不要使用.onclick绑定click事件，因为这将覆盖任何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>