javascript - 如何循环事件点击获取每个a的属性？

Question

我想获取onclick点击事件的每个a属性的data-id的值，但是点击没有响应，没有获取到值每个属性。有什么方法可以点击每个属性吗？

请看我的代码:

window.onload = function() {
  var showClick = document.getElementById("showClick");
  for (var i = 0; i < showClick.length; i++) {
    (function(i) {
      showClick[i].onclick = function(event) {
        event.preventdefault()
        alert(showClick.getAttribute("data-id"));
      }
    })(i);
  }
}

<ul>
  <li>
    <a id="showClick" href="" data-id="1">dd</a>
  </li>
  <li>
    <a id="showClick" href="" data-id="2">ee</a>
  </li>
  <li>
    <a id="showClick" href="" data-id="3">gg</a>
  </li>
  <li>
    <a id="showClick" href="" data-id="4">xx</a>
  </li>
</ul>

Answer 1

首先，所有 id 属性必须是唯一的。使用通用类代替:

<li>
    <a class="showClick" href="" data-id="1">dd</a>
</li>
<li>
    <a class="showClick" href="" data-id="2">ee</a>
</li>

最好使用.addEventListener() 附加click 事件。

注意:当您处理 data-* attributes 时，使用 dataset 会更有效:

this.dataset.id

获取data-id属性。

window.onload = function() {
  var showClick = document.querySelectorAll(".showClick");

  for (var i = 0; i < showClick.length; i++) {
    showClick[i].addEventListener('click', function(event) {
      event.preventDefault();

      console.log(this.dataset.id);
    });
  }
}

<ul>
  <li>
    <a class="showClick" href="" data-id="1">dd</a>
  </li>
  <li>
    <a class="showClick" href="" data-id="2">ee</a>
  </li>
  <li>
    <a class="showClick" href="" data-id="3">gg</a>
  </li>
  <li>
    <a class="showClick" href="" data-id="4">xx</a>
  </li>
</ul>