Получить data-ключ тега при нажатии, где существует много классов - PullRequest
Новая
       13

Получить data-ключ тега при нажатии, где существует много классов

0 голосов
/ 27 июня 2018

Я хочу получить innerHTML элемента div при нажатии где все имена классов совпадают.

Работает для A текста, но не работает при нажатии S или D. 

<div class="keys">
     <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>

    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>

    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
</div>

Вот код JavaScript 

var x = document.querySelector('.key');
x.addEventListener('click', popUp);

function popUp(e) {
    alert(e.target.innerHTML);
}

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Либо добавьте прослушиватель событий к каждому элементу .key: 

document.querySelectorAll('.key').forEach(key => {
  key.addEventListener('click', () => console.log(key.innerHTML));
});
<div class="keys">
     <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>

    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>

    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
</div>

Или вместо добавления прослушивателя для каждого key, возможно, было бы более элегантно использовать только одиночный прослушиватель для контейнера .keys через делегирование события и найти closest .key из нажатого элемента: 

document.querySelector('.keys').addEventListener('click', (e) => {
  const key = e.target.closest('.key');
  console.log(key.innerHTML);
});
<div class="keys">
  <div data-key="65" class="key">
    <kbd>A</kbd>
    <span class="sound">clap</span>
  </div>

  <div data-key="83" class="key">
    <kbd>S</kbd>
    <span class="sound">hihat</span>
  </div>

  <div data-key="68" class="key">
    <kbd>D</kbd>
    <span class="sound">kick</span>
  </div>
</div>
0 голосов
/ 27 июня 2018

Используйте querySelectorAll вместо querySelector в сочетании с методом Array.from.

Поскольку querySelectorAll() возвращает a NodeList , вам необходимо прикрепить обработчик click для каждого элемента. 

var x = Array.from(document.querySelectorAll('.key')).forEach(function(item){
   item.addEventListener('click', popUp);
});

function popUp(e) {
    alert(e.target.innerHTML);
}
<div class="keys">
     <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>

    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>

    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
</div>
...