在存在多个类的地方单击时获取标签的数据键

Question

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

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

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

由于querySelectorAll()returns一个NodeList，你必须附加一个click事件handler 每个项目。

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>

Answer 2

为每个 .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>

在存在多个类的地方单击时获取标签的数据键

Get data-key of a tag when clicked where many classes exists

javascript

alert

onclick

在存在多个 类 的地方单击时获取标签的数据键

Get data-key of a tag when clicked where many classes exists

javascript

alert

onclick

在存在多个类的地方单击时获取标签的数据键