代码之家 › 专栏 › 技术社区 › wen tian

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

web-frontend javascript

wen tian · 技术社区 · 6 年前

我想知道 data-id 每一个都是 onclick click事件,但click没有响应,也没有获取每个属性的值。

请看一下我的代码:

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>

2 回复 | 直到 6 年前

connexo 6 年前

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>

Thijs 6 年前

id 属性在所有元素上都应该是唯一的。因为只有一个元素的Id是方法 getElementById

如果您希望能够从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