JavaScript 获取数据属性多个div

Question

我在处理多个 div 和获取它们的数据属性值时遇到问题。所有 div 都具有相同的 class，并且根据我单击的是哪一个，它应该显示该数据属性值。

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 select 所有有效的数据属性并将它们放入一个对象中，但现在我遇到了如何 select 真实的问题。不幸的是，查询 select 或 select 是第一个元素，所以无论我按 div 什么，只有第一个是 selected.

console.log(e) 在 playSoundMouse(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);
}

JavaScript 获取数据属性多个div

JavaScript get data-attribute multiple divs

html

javascript

css

custom-data-attribute