Question

我想获取data-id click事件的每个属性的onclick的值，但是单击没有响应，也没有获取每个属性的值。您可以点击每个属性吗？

请查看我的代码：

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事件。

注意：：像这样处理dataset时，使用data-* attributes效率更高：

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仅返回单个项目。在这种情况下，可能是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元素。< / p>

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

2 个答案: