Как зациклить событие, нажмите получить атрибуты каждого а? - PullRequest
Новая
       4

Как зациклить событие, нажмите получить атрибуты каждого а?

0 голосов
/ 21 сентября 2018

Я хочу получить значение data-id каждого свойства события клика 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>

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Значение атрибута id должно быть уникальным для всех элементов.Поскольку всегда должен быть только 1 элемент с идентификатором, метод getElementById возвращает только один элемент.В этом случае, вероятно, первый элемент в DOM с идентификатором.

Если вы хотите получить несколько элементов из DOM, вам, вероятно, лучше назначить им класс CSS.Чтобы указать, что класс используется для поиска элементов в DOM, люди иногда ставят перед этим классом что-то вроде js-.Хороший способ получить несколько элементов одновременно - использовать querySelectorAll.Он будет соответствовать элементам в DOM с помощью селектора CSS.Для вашего случая это будет работать так: 

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.

0 голосов
/ 21 сентября 2018

Сначала все атрибуты 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>
...