如何访问和更改具有相同名称的多个类并循环访问它们以在单击时向它们添加 css 更改？
[英]How to access and change multiple classes with the same name and loop through them to add a css change to them upon click?
问题描述
I am a beginner.
我是初学者。 So I am making a drum pad with 6 interactive pads using javascript.所以我正在使用 javascript 制作一个带有 6 个交互式鼓垫的鼓垫。 I want to be able to change the color of each pad upon clicking/touching it.我希望能够在单击/触摸时更改每个垫的颜色。 The way my code works now, only the first (top left) pad gets changed by the click.我的代码现在的工作方式，只有第一个（左上角）垫被点击改变。 I would like to have this effect happen to all the pads.我想让这种效果发生在所有的垫子上。 querySelectorAll() on the pad variable doesn't seem to do the trick. pad 变量上的 querySelectorAll() 似乎不起作用。 It actually stops the first pad from being activated at all.它实际上完全阻止了第一个打击垫的激活。 Any tips?有小费吗？ Thanks!谢谢！
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>
1 个解决方案
解决方案1
0 2022-01-27 17:53:22
Nice job so far on the project!到目前为止，该项目做得很好！ You were right in using querySelectorAll , but you'll need to loop through the elements to add the onClick to all the pads.您使用querySelectorAll是对的，但是您需要遍历元素以将 onClick 添加到所有焊盘。 First I'd change the pad variable to querySelectorAll like this:首先，我将 pad 变量更改为 querySelectorAll，如下所示：
let pad = document.querySelectorAll('.pad');
And since pad is now an array, we'll change the playDrum function by updating pad.classList.add() to event.target.classList.add() like this:由于 pad 现在是一个数组，我们将通过将pad.classList.add()更新为event.target.classList.add() ) 来更改 playDrum function，如下所示：
event.target.classList.add('playing');
event.target will target the specific pad you have clicked. event.target将针对您单击的特定垫。 Lastly, when attaching your onClick event, you can use a forEach function like this:最后，当附加您的 onClick 事件时，您可以像这样使用forEach function ：
pad.forEach(elem => elem.addEventListener("click", playDrum));
And you can remove the drumKit.addEventListener('touchstart', playDrum);你可以删除drumKit.addEventListener('touchstart', playDrum); , it's not needed when the onClick function is attached to all the individual pads. ，当 onClick function 连接到所有单独的焊盘时不需要。
Here's the JS with all the changes:这是包含所有更改的 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));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.