javascript - 在存在多个类的情况下单击时获取标签的数据键

Question

我想在点击时获取div的innerHTML 其中所有类名称都是相同的。

它适用于 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);
}

Answer 1

结合Array.from方法使用querySelectorAll代替querySelector。

由于 querySelectorAll() 返回一个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>