代码之家 › 专栏 › 技术社区 › HovSky

javascript获取数据属性多个div

custom-data-attribute css html javascript

HovSky · 技术社区 · 6 年前

我对多个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,都只选择第一个元素。

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

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

谢谢您。

1 回复 | 直到 6 年前

Barmar 6 年前

你应该分开 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);
}