我是初學者。所以我正在使用 javascript 制作一個帶有 6 個互動式打擊墊的鼓墊。我希望能夠在單擊/觸摸時更改每個墊的顏色。我的代碼現在的作業方式，只有第一個（左上角）墊被點擊改變。我想讓這種效果發生在所有的墊子上。pad 變數上的 querySelectorAll() 似乎不起作用。它實際上完全阻止了第一個打擊墊的激活。有小費嗎？謝謝！
const drumKit = document.querySelector('.drumkit');
let pad = document.querySelector('.pad');
function playDrum(event) {
if (event.target.classList.contains('pad')) {
event.preventDefault();
let soundToPlay = event.target.dataset.sound;
drums.play(soundToPlay);
pad.classList.add('playing');
}
}
function setViewportHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setViewportHeight();
window.addEventListener('resize', setViewportHeight);
drumKit.addEventListener('click', playDrum);
drumKit.addEventListener('touchstart', playDrum);body {
background: #353535
}
.drumkit {
display: flex;
flex-wrap: wrap;
justify-content: center;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
.pad {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
box-shadow: 0 0 10px #000000;
flex: 1 0 calc(33.333% - 20px);
background: radial-gradient(#e3a864, #de9866, #d08367, #af6762);
}
.playing {
transform: scale(-1.-1);
border-color: #ffc600;
box-shadow: 0 0 1rem #ffc600;
}
.pad img {
width: 150px;
pointer-events: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="./styles.css">
<title>Lofi Beat Machine</title>
</head>
<body>
<div class="drumkit">
<div class="pad" data-sound="samp1"><img src="./icons/sample.png" alt="samp1"></div>
<div class="pad" data-sound="samp2"><img src="./icons/sample.png" alt="samp2"></div>
<div class="pad" data-sound="samp3"><img src="./icons/sample.png" alt="samp3"></div>
<div class="pad" data-sound="kick"><img src="./icons/kick.png" alt="kick"></div>
<div class="pad" data-sound="snare"><img src="./icons/snare.png" alt="snare"></div>
<div class="pad" data-sound="hat"><img src="./icons/closed-hihat.png" alt="hihat"></div>
</div>
<script src="howler.min.js"></script>
<script src="app.js"></script>
</body>
</html>uj5u.com熱心網友回復：
到目前為止，該專案做得很好！您使用querySelectorAll是對的，但是您需要回圈遍歷元素以將 onClick 添加到所有焊盤。首先，我將 pad 變數更改為 querySelectorAll，如下所示：
let pad = document.querySelectorAll('.pad');
由于 pad 現在是一個陣列，我們將通過更新pad.classList.add()來更改 playDrum 函式，event.target.classList.add()如下所示：
event.target.classList.add('playing');
event.target將針對您單擊的特定墊。最后，在附加 onClick 事件時，您可以使用這樣的forEach函式：
pad.forEach(elem => elem.addEventListener("click", playDrum));
并且您可以洗掉drumKit.addEventListener('touchstart', playDrum);，當 onClick 功能附加到所有單獨的墊時不需要它。
這是包含所有更改的 JS：
const drumKit = document.querySelector('.drumkit');
let pad = document.querySelectorAll('.pad');
function playDrum(event) {
if (event.target.classList.contains('pad')) {
event.preventDefault();
let soundToPlay = event.target.dataset.sound;
drums.play(soundToPlay);
event.target.classList.add('playing');
}
}
function setViewportHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setViewportHeight();
window.addEventListener('resize' , setViewportHeight);
pad.forEach(elem => elem.addEventListener("click", playDrum));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422191.html
標籤：