JS30DRUMKITclassList.remove不起作用-有解無憂

我一直在嘗試從 JS30 制作鼓包專案，但是一旦結束，我就無法洗掉過渡效果。我嘗試添加一個 keyup 事件、一個 transitionend 和不同的 querySelectors，但它只是不作業......這是我的代碼與原始專案中的 removeTransition 函式......有人可以讓它作業嗎？

HTML

<body>
    <main>  
        <div class="keys">
            <div id="a" class="key" onClick="clickHandler('a')">
                <kbd>A</kbd>
                <p class="sound">clap</p>
            </div>
            <div id="s" class="key"  onClick="clickHandler('s')">
                <kbd>S</kbd>
                <p class="sound">hihat</p>
            </div>
            <div id="d" class="key" onClick="clickHandler('d')">
                <kbd>D</kbd>
                <p class="sound">kick</p>
            </div>
            <div id="f" class="key" onClick="clickHandler('f')">
                <kbd>F</kbd>
                <p class="sound">openhat</p>
            </div>
            <div id="g"  class="key" onClick="clickHandler('g')">
                <kbd>G</kbd>
                <p class="sound">boom</p>
            </div>
            <div id="h" class="key" onClick="clickHandler('h')">
                <kbd>H</kbd>
                <p class="sound">ride</p>
            </div>
            <div  id="j" class="key" onClick="clickHandler('j')">
                <kbd>J</kbd>
                <p class="sound">snare</p>
            </div>
            <div id="k" class="key" onClick="clickHandler('k')">
                <kbd>K</kbd>
                <p class="sound">tom</p>
            </div>
            <div id="l" class="key" onClick="clickHandler('l')">
                <kbd>L</kbd>
                <p class="sound">tink</p>
            </div>
        </div>
    </main>

    
    <audio data-key="a" src="./audio/01 - JavaScript Drum Kit_sounds_clap.wav"></audio>
    <audio data-key="s" src="./audio/01 - JavaScript Drum Kit_sounds_hihat.wav"></audio>
    <audio data-key="d" src="./audio/01 - JavaScript Drum Kit_sounds_kick.wav"></audio>
    <audio data-key="f" src="./audio/01 - JavaScript Drum Kit_sounds_openhat.wav"></audio>
    <audio data-key="g" src="./audio/01 - JavaScript Drum Kit_sounds_boom.wav"></audio>
    <audio data-key="h" src="./audio/01 - JavaScript Drum Kit_sounds_ride.wav"></audio>
    <audio data-key="j" src="./audio/01 - JavaScript Drum Kit_sounds_snare.wav"></audio>
    <audio data-key="k" src="./audio/01 - JavaScript Drum Kit_sounds_tom.wav"></audio>
    <audio data-key="l" src="./audio/01 - JavaScript Drum Kit_sounds_tink.wav"></audio>

    <script src="./scripts.js"></script>
</body>

const keymap = {
    a: "a",
    s: "s",
    d: "d",
    f: "f",
    g: "g",
    h: "h",
    j: "j",
    k: "k",
    l: "l"  
}


function removeTransition(e) {

    if(e.propertyName!=='transform') return;
    this.classList.remove('playing');
}
const keys = document.querySelectorAll('.key')
keys.forEach(key => key.addEventListener('transitionend', removeTransition));


function play(key) {
    const keyElement = document.querySelector(`.key[id="${key}"]`); 
    const audioElement = document.querySelector(`audio[data-key="${key}"]`);
    
    keyElement.classList.add('playing');
    audioElement.currentTime = 0;
    audioElement.play();

}


window.addEventListener('keydown',(e)=>{
    const key = keymap[e.key];
    if (key) {
        play(key);
    }
})


function clickHandler (key){
    play(key);
}

uj5u.com熱心網友回復：

此選項正在保存以前的元素：

      let prevkeyElement, prevaudioElement;

      function play(key) {
        if (prevkeyElement !== undefined) {
          prevkeyElement.classList.remove("playing");
          prevaudioElement.pause();
        }

        const keyElement = document.querySelector(`.key[id="${key}"]`);
        const audioElement = document.querySelector(`audio[data-key="${key}"]`);
        prevkeyElement = keyElement;
        prevaudioElement = audioElement;

        keyElement.classList.add("playing");
        audioElement.currentTime = 0;
        audioElement.play();
      }

      window.addEventListener("keydown", (e) => {
        const key = keymap[e.key];
        if (key) {
          play(key);
        }
      });

      function clickHandler(key) {
        play(key);
      }

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/478993.html

標籤：javascript jQuery

上一篇：如何將回圈的javascriptAPI資料發送到html網頁？

下一篇：使用OpenCV在GoogleColab中顯示流影像