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

您的代码存在一些问题：

标记中没有类别为message-email的元素。我想当您尝试演示标记时，这是一个错误，并且您正在使用wow类引用锚元素
document.getElementsByClassName返回一个Node集合。您必须遍历集合才能绑定click事件。您可以使用Array.prototype.forEach.call(<NodeCollection>, function(element) { ... }) to iterate through your node collection
请勿使用.onclick绑定点击事件，因为它将覆盖所有onclick处理程序。您应该改用.addEventListener('click', function() {...})
要访问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>

单击多个具有相同类名的元素

1 个答案: