JavaScript获取数据-属性多个div
JavaScript获取数据-属性多个div
提问于 2018-06-29 07:41:51
我在处理多个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，我可以找到正确的数据属性
如何访问节点值并将其存储到变量中？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-29 07:56:06
您应该将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);
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51092493
复制相关文章
相似问题