javascript - 将 addEventListener 添加到所有按钮
问题描述
好吧，事情是这样的，我已经使用属性“data-key”将音频与键匹配，以这种方式进行：
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
现在，我想做同样的事情，但点击底部。我已经尝试过，就像你在 JavaScript 片段末尾看到的那样，为所有按钮添加了一个循环，但看起来很尴尬，并且只运行一个音频。
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if (!audio) return; // this stop the function from running all together.
audio.currentTime = 0; // this rewind the audio to the start
audio.play(key);
key.classList.add("playing");
}
function removeTransition(e) {
if (e.propertyName !== "transform") return; // skip it if it's not a transform
this.classList.remove("playing");
}
const keys = document.querySelectorAll(".key");
keys.forEach((key) => key.addEventListener("transitionend", removeTransition));
document.addEventListener("keydown", playSound);
for (var i = 0; i < document.querySelectorAll(".beat").length; i++) {
document.querySelectorAll(".beat")[i].addEventListener("click", function () {
var clickAudio = new Audio(
"https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/22[kb]conga1.aif.mp3"
);
clickAudio.play();
});
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Righteous&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Wallpoet&display=swap"
rel="stylesheet"
/>
<title>BEATS MACHINE</title>
</head>
<body>
<div class="container-808">
<div class="name-and-display-container">
<div class="display">
<span class="beats-controler">120.BPM</span>
</div>
<div class="name">
<h1>Rhythm Designer</h1>
<h3>RD-808</h3>
</div>
</div>
<div class="keys-container">
<button data-key="81" class="key beat first-row">
<kbd>Q</kbd><span class="sound">CONGA</span>
</button>
<button data-key="87" class="key beat first-row">
<kbd>W</kbd><span class="sound">HI HAT</span>
</button>
<button data-key="69" class="key beat first-row">
<kbd>E</kbd><span class="sound">HAND CLAP</span>
</button>
<button data-key="82" class="key beat second-row">
<kbd>R</kbd><span class="sound">HIGH TOM</span>
</button>
<button data-key="84" class="key beat second-row">
<kbd>T</kbd><span class="sound">OPEN HIGH HAT</span>
</button>
<button data-key="89" class="key beat second-row">
<kbd>Y</kbd><span class="sound">SNARE</span>
</button>
<button data-key="85" class="key beat third-row">
<kbd>U</kbd><span class="sound">LOW CONGA</span>
</button>
<button data-key="73" class="key beat third-row">
<kbd>I</kbd><span class="sound">CRASH</span>
</button>
<button data-key="79" class="key beat third-row">
<kbd>O</kbd><span class="sound">TAMB</span>
</button>
<audio
data-key="81"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/22[kb]conga1.aif.mp3"
></audio>
<audio
data-key="87"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/4[kb]cl_hihat.aif.mp3"
></audio>
<audio
data-key="69"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/31[kb]handclap.aif.mp3"
></audio>
<audio
data-key="82"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/17[kb]hightom.aif.mp3"
></audio>
<audio
data-key="84"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/51[kb]open_hh.aif.mp3"
></audio>
<audio
data-key="89"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/8[kb]snare.aif.mp3"
></audio>
<audio
data-key="85"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/16[kb]80s-LOWCONGA.aif.mp3"
></audio>
<audio
data-key="73"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/83[kb]80s-CRASH1.aif.mp3"
></audio>
<audio
data-key="79"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/20[kb]80s-TAMB1.aif.mp3"
></audio>
</div>
</div>
<script src="index.js"></script>
</body>
</html>解决方案
您可以使用事件委托，因此将事件侦听器附加到容器，每次单击 span 元素时，我们都会获取按钮元素（其父元素）的数据键，然后搜索具有相同数据键属性的音频元素并播放
document.querySelector(".keys-container").onclick = function(e) {
if(e.target.nodeName === "SPAN") {
var key = e.target.parentElement.getAttribute("data-key");
document.querySelector(`audio[data-key='${key}']`).play();
}
} <div class="container-808">
<div class="name-and-display-container">
<div class="display">
<span class="beats-controler">120.BPM</span>
</div>
<div class="name">
<h1>Rhythm Designer</h1>
<h3>RD-808</h3>
</div>
</div>
<div class="keys-container">
<button data-key="81" class="key beat first-row">
<kbd>Q</kbd><span class="sound">CONGA</span>
</button>
<button data-key="87" class="key beat first-row">
<kbd>W</kbd><span class="sound">HI HAT</span>
</button>
<button data-key="69" class="key beat first-row">
<kbd>E</kbd><span class="sound">HAND CLAP</span>
</button>
<button data-key="82" class="key beat second-row">
<kbd>R</kbd><span class="sound">HIGH TOM</span>
</button>
<button data-key="84" class="key beat second-row">
<kbd>T</kbd><span class="sound">OPEN HIGH HAT</span>
</button>
<button data-key="89" class="key beat second-row">
<kbd>Y</kbd><span class="sound">SNARE</span>
</button>
<button data-key="85" class="key beat third-row">
<kbd>U</kbd><span class="sound">LOW CONGA</span>
</button>
<button data-key="73" class="key beat third-row">
<kbd>I</kbd><span class="sound">CRASH</span>
</button>
<button data-key="79" class="key beat third-row">
<kbd>O</kbd><span class="sound">TAMB</span>
</button>
<audio
data-key="81"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/22[kb]conga1.aif.mp3"
></audio>
<audio
data-key="87"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/4[kb]cl_hihat.aif.mp3"
></audio>
<audio
data-key="69"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/31[kb]handclap.aif.mp3"
></audio>
<audio
data-key="82"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/17[kb]hightom.aif.mp3"
></audio>
<audio
data-key="84"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/51[kb]open_hh.aif.mp3"
></audio>
<audio
data-key="89"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/8[kb]snare.aif.mp3"
></audio>
<audio
data-key="85"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/16[kb]80s-LOWCONGA.aif.mp3"
></audio>
<audio
data-key="73"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/83[kb]80s-CRASH1.aif.mp3"
></audio>
<audio
data-key="79"
src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/20[kb]80s-TAMB1.aif.mp3"
></audio>
</div>
</div>推荐阅读
- python - PySpark - 在 GroupedData 和输出直方图上应用自定义函数
- amazon-web-services - 使用http postflutter web时出现XMLHttpRequest错误
- r - 学习如何在 R 中的函数中处理 ...
- python-3.x - Django - 在模板呈现具有动态字段的脆表单时出错：“int”对象没有属性“get”
- reactjs - 从数据库中获取数据到路由器后，从后端到前端获取数据
- sql - DB2：搜索深度优先：（语法）错误
- java - 如何扩展 Spring oidcUser 以使用 customUserDetails
- amazon-web-services - 如何在 AWS 胶水中使用从一个胶水脚本到另一个胶水脚本的函数
- java - 如何在signe测试用例中为不同的url多次模拟res模板
- version-control - 从 helix 服务器中删除文件和文件夹，同时将它们保留在 pc 上