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

Question

我想获取onclick点击事件的每个属性的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>

Answer 2

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

的元素

如果您希望能够从 DOM 中获取多个元素，您最好为它们分配一个 CSS class。为了表明 class 用于查找 DOM 中的元素，人们有时会在这些 class 前加上类似 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 元素.

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

How to loop event click the get the attributes of each a?

javascript

web-frontend