JavaScript 获取数据属性的多个 div

Question

我对多个 div 和获取它们的数据属性值有疑问。 所有 div 都具有相同的类，并且根据我单击的哪一个，它应该显示该数据属性值。

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  console.log(audio);
  if (!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.add('playing');
}

function removeTransition(e) {
  if (e.propertyName !== 'transform') return;
  this.classList.remove('playing');
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener("keydown", playSound);

const keysPressedMouse = document.querySelectorAll('.key');
keysPressedMouse.forEach(keyMouse => keyMouse.addEventListener('click',
  playSoundMouse));

function playSoundMouse(e) {
  const keyMouseSecond = document.querySelector(`.key[data-key="${e.keyMouse.}"]`)
  console.log(keyMouseSecond);
}

https://codepen.io/hovsky/pen/dKQxBO

它适用于键盘，现在我想要用鼠标点击不同的 div 获得相同的效果。我知道使用“onclick=function(this)”有一个简单的解决方案，但我试图避免使用多个函数，并尝试将它们全部放在同一个函数下。

keypressedMouse 选择所有有效的数据属性并将它们放入一个对象中，但现在我遇到了如何选择真实的问题。不幸的是，查询选择器选择了第一个元素，所以无论我按什么 div，都只会选择第一个。

playSoundMouse(e)函数中的console.log(e)，显示按下的正确DIV，我可以找到正确的数据属性

如何访问该节点值并将其存储到变量中？

谢谢。

Answer 1

您应该将playSound() 拆分为两个函数——一个处理键盘事件，一个只播放声音。然后，您也可以从处理鼠标事件的函数中调用第二个函数，因为这两个事件以不同的方式查找参数。

function playSound(keyCode) {
  const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${keyCode}"]`);
  console.log(audio);
  if (!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.add('playing');
}

function playSoundKbd(e) {
  playSound(e.keyCode);
}

document.querySelectorAll("div.key[data-key]").forEach(d => d.addEventListener("click", playSoundMouse));

function playSoundMouse(e) {
  playSound(e.currentTarget.dataset.key);
}