JavaScript获取数据属性多个div

Question

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

FACTOR_VALUE1>?

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);
}