我在处理多个div和获取它们的数据属性值时遇到了问题。所有div都有相同的类,根据我单击的是哪一个,它应该显示该data属性值。
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,我可以找到正确的数据属性
如何访问节点值并将其存储到变量中?
谢谢。
https://stackoverflow.com/questions/51092493
复制相似问题