将jQuery转换为纯JavaScript

前端开发 2026-07-08

我已经把一个音频序列器从jQuery转换成JavaScript,只有一行还没搞清楚,我不知道该怎么做

"use strict";  

// $(function() {  

  let futureTickTime,  
    counter = 1,  
    metronome,  
    metronomeVolume = 1,   
    tempo = 90,  
    secondsPerBeat = 60 / tempo,  
    counterTimeValue = (secondsPerBeat / 4),  
    oscFrequency = 100,  
    timerID,   
    isPlaying = false,   
    osc;  
  /*_____________________________________________BEGIN load sounds*/  

  let sounds = audioBatchLoader({  
    kick: "sounds/kick.mp3",  
    snare: "sounds/snare.mp3",  
    hihat: "sounds/hihat.mp3",  
    shaker: "sounds/shaker.mp3"  
  });  

  //_____________________________________________END load sounds */  

  //_____________________________________________BEGIN Array Tracks    

 let kickTrack = [ ], 
 snareTrack = [ ], 
 hiHatTrack = [ ], 
 shakerTrack = [ ];
  //_____________________________________________END Array Tracks  

  function scheduleSound(trackArray, sound, count, time) {   
    for (let i = 0; i < trackArray.length; i += 1) {  
      if (count === trackArray[i]) {  
        sound.play(time);  
      }  
    }  
  }  

  function playMetronome(time, playing, volume) {  
    if (playing) {  
      osc = audioContext.createOscillator();  
      osc.connect(metronome);  
      metronome.gain.value = volume;  
      metronome.connect(audioContext.destination);  

      if (counter === 1) {  
        osc.frequency.value = 500;  
      } else {  
        osc.frequency.value = 300;  
      }  

      osc.connect(metronome);  
      metronome.connect(audioContext.destination);  
      osc.start(time);  
      osc.stop(time + 0.1);  
    }  
  }  
  function playTick() {  
    // console.log("This is 16th note:" + counter);  
    secondsPerBeat = 60 / tempo; 
    counterTimeValue = (secondsPerBeat / 4);
    counter += 1;  
    futureTickTime += counterTimeValue;  
    if (counter > 16) {  
      counter = 1;  
    }  
  }  

  function scheduler() {  
    if (futureTickTime < audioContext.currentTime + 0.1) {  
      playMetronome(futureTickTime, true, metronomeVolume);  
      scheduleSound(kickTrack, sounds.kick, counter, futureTickTime - audioContext.currentTime);  
      scheduleSound(snareTrack, sounds.snare, counter, futureTickTime - audioContext.currentTime);  
      scheduleSound(hiHatTrack, sounds.hihat, counter, futureTickTime - audioContext.currentTime);  
      scheduleSound(shakerTrack, sounds.shaker, counter, futureTickTime - audioContext.currentTime);  
      playTick();  
    }  
    timerID = window.setTimeout(scheduler, 0);   
  }  

  function play() {  
    osc = audioContext.createOscillator();  
    metronome = audioContext.createGain();  
    isPlaying = !isPlaying;  
    if (isPlaying) {  
      counter = 1;  
      futureTickTime = audioContext.currentTime;  
      scheduler();  
    } else {  
      window.clearTimeout(timerID);  
    }  
  }  

  document.querySelector('.play-stop-button').addEventListener('click', function() {  
    play();  
  });  
  // $(".play-stop-button").on("click", function() {  
  //   play();  
  // });  

      //_____________________________________BEGIN metronome toggle  

  document.querySelector('.metronome').addEventListener("click",function(){  
    if(metronomeVolume){ 
           metronomeVolume = 0; 
        }else{ 
           metronomeVolume = 1; 
        }     
   });  
  // $(".metronome").on("click",function(){  
  //   if(metronomeVolume){ 
  //          metronomeVolume = 0; 
  //       }else{ 
  //          metronomeVolume = 1; 
  //       }     
  //  });  

    //__________________________________END metronome toggle 

// $("#tempo").on("change", function() { 
//   tempo = $(this).val();  
//    $("#showTempo").html(tempo); 
// });

document.getElementById('tempo').addEventListener("change", function() { 
  tempo = document.getElementById('showTempo').value();  
  //  $("#showTempo").html(tempo); 
   document.getElementById('showTempo').innerHTML = tempo;
});
    //__________________________________BEGIN create grid  

  for(let i=1;i<=4;i+=1){  
    //$(".app-grid").append("<div class='track-"+i+"-container' </div>");  
    document.querySelector('.app-grid').innerHTML += `<div class="track-${i}-container"> </div>`;
    for(let j=1;j<17;j+=1){  
    //$(".track-"+i+"-container").append("<div class='grid-item track-step step-"+j+"'</div>");  
    document.querySelector(`.track-${i}-container`).innerHTML += `<div class="grid-item track-step step-${j}"></div>`;
    }  
  }  

    //__________________________________END create grid  

    //______________________BEGIN Grid interactivity 

const grid_item = document.querySelector('.grid-item');
// function sequenceGridToggler(domEle,arr){ 
//   $(domEle).on("mousedown",".grid-item",function(){ 
//     var gridIndexValue=$(this).index();
//     var offset=gridIndexValue+1;
//     var index=arr.indexOf(offset);
//     if(index>-1){
//       arr.splice(index,1);
//       this.classList.remove('purple');
//     } else {
//       arr.push(offset);
//       this.classList.add('purple');
//     } 
//   }); 
// } 

function sequenceGridToggler(domEle,arr){ 
    document.querySelectorAll(`${domEle}`).forEach(item => {
      item.addEventListener("mousedown", function(ele) { 
        let gridIndexValue=$(this).index();
        // let gridIndexValue = item => [...item.parentNode.children].indexOf(item)
        let offset=gridIndexValue+1;
        let index=arr.indexOf(offset);
        if(index>-1){
          arr.splice(index,1);
          this.classList.remove('purple');
        } else {
          arr.push(offset);
          this.classList.add('purple');
        } 
      })
  })
}

sequenceGridToggler(".track-1-container .grid-item",kickTrack); 
sequenceGridToggler(".track-2-container .grid-item",snareTrack); 
sequenceGridToggler(".track-3-container .grid-item",hiHatTrack); 
sequenceGridToggler(".track-4-container .grid-item",shakerTrack); 
//______________________END Grid interactivity 

// });

这是我还没搞清楚如何转换的那一行
(它位于sequenceGridToggler(domEle,arr) 函数中):

let gridIndexValue=$(this).index();

我尝试了各种方法,这个是我目前最接近的结果(其实并不算太接近):

let gridIndexValue = item => [...item.parentNode.children].indexOf(item)

解决方案

你的尝试是在创建一个函数。把箭头函数 item => 去掉,如下所示:

let gridIndexValue = [...item.parentNode.children].indexOf(item)

现在,gridIndexValue 是一个值,而不是一个函数。

站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章