如何訪問和更改具有相同名稱的多個類並循環訪問它們以在單擊時向它們添加 css 更改？

Question

我是初學者。 所以我正在使用 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>

Answer 1

到目前為止，該項目做得很好！ 您使用querySelectorAll是對的，但是您需要遍歷元素以將 onClick 添加到所有焊盤。 首先，我將 pad 變量更改為 querySelectorAll，如下所示：

  let pad = document.querySelectorAll('.pad');

由於 pad 現在是一個數組，我們將通過將pad.classList.add()更新為event.target.classList.add() ) 來更改 playDrum function，如下所示：

  event.target.classList.add('playing');

event.target將針對您單擊的特定墊。 最后，當附加您的 onClick 事件時，您可以像這樣使用forEach function ：

  pad.forEach(elem => elem.addEventListener("click", playDrum));

你可以刪除drumKit.addEventListener('touchstart', playDrum); ，當 onClick function 連接到所有單獨的焊盤時不需要。

這是包含所有更改的 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));

如何訪問和更改具有相同名稱的多個類並循環訪問它們以在單擊時向它們添加 css 更改？

問題描述

1 個解決方案

解決方案1
0 2022-01-27 17:53:22

如何訪問和更改具有相同名稱的多個類並循環訪問它們以在單擊時向它們添加 css 更改？

問題描述

1 個解決方案

解決方案1 0 2022-01-27 17:53:22

解決方案1
0 2022-01-27 17:53:22