JavaScript如何获取数据属性多个div?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (240)

我有多个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);
}

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

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

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

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

谢谢。

提问于
用户回答回答于

你们应该分开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.target.dataset.key);
}

扫码关注云+社区

领取腾讯云代金券