如何循环事件单击获取每个a的属性？答案

【问题标题】：How to loop event click the get the attributes of each a?如何循环事件单击获取每个a的属性？
【发布时间】：2019-02-26 00:11:51
【问题描述】：

我想获取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>

【问题讨论】：

id 属性应该是唯一的...

标签： javascript web-frontend

【解决方案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>

【讨论】：

很高兴能帮到兄弟。
应该是唯一的应该是必须是唯一的。这不是可选的。
继续并在答案中替换它@connexo
感谢您的干预 :)

【解决方案2】：

id 属性的值在所有元素中应该是唯一的。由于应该只有 1 个具有 Id 的元素，因此方法 getElementById 只返回一个项目。在这种情况下，可能是 DOM 中第一个具有 ID 的元素。

如果您希望能够从 DOM 中获取多个元素，最好为它们分配一个 CSS 类。为了表明该类用于在 DOM 中查找元素，人们有时会在这些类前面加上 js- 之类的前缀。一次获取多个元素的好方法是使用querySelectorAll。给定 CSS 选择器，它将匹配 DOM 中的元素。对于您的情况，它会像这样工作：

function onShowClickElementClicked(event) {
  var showClickElement = event.currentTarget;
  
  event.preventDefault();
  console.log('You clicked an element with ID: ', showClickElement.getAttribute("data-id"));
}

window.onload = function () {
    var showClickElements = document.querySelectorAll(".js-showClick");
    for (var i = 0; i < showClickElements.length; i++) {
      showClickElements[i].addEventListener('click', onShowClickElementClicked);
    }
}

button {
  background-color: transparent;
  border: none;
  font: inherit;
}
button:hover {
  text-decoration: underline;
}

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

旁注：如果您想要一个交互式元素（例如将获得标签焦点的元素）但不应该导航到其他页面，那么您几乎总是最好使用 button 元素。

【讨论】：