Блог

У меня есть два набора кода, один из которых из JavaScript и jQuery.

JavaScript — здесь я просматриваю свой html-код, добавляю прослушиватель событий и передаю значение моей функции для сравнения с помощью переключателя. Поэтому, когда я нажимаю на кнопку, это издает звук и работает нормально, но в jQuery это работает по-другому, и я не понимаю, почему.

 for(var i=0;i < arrayLength; i  ){
      document.querySelectorAll(".drum")[i].addEventListener("click", function(){

      var buttonInnerHTML = this.innerHTML;
      makeSound(buttonInnerHTML);
      buttonAnimation(buttonInnerHTML);
  });
}

function makeSound(key){  
  switch (key) {
    case "w":
      var tom1 = new Audio('sounds/tom-1.mp3');
      tom1.play();
      break;
    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;
    case "s":
      var tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();
      break;
    case "d":
      var tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();
      break;
    case "j":
      var snare = new Audio("sounds/snare.mp3");
      snare.play();
      break;
    case "k":
      var crash = new Audio("sounds/crash.mp3");
      crash.play();
      break;
    case "l":
      var kick = new Audio("sounds/kick-bass.mp3");
      kick.play();
      break;
    default:
      //console.log(buttonInnerHTML);
  }
}
  

В jQuery я сделал то же самое, но вместо того, чтобы воспроизводить анимацию один раз, анимация воспроизводится по количеству циклов моего forloop. В моем случае это было 4 раза.

 for(var i=0; i < numOfButtons; i  ){
    $(".btn").on("click",function(){
    var buttonPress = $(".btn").index(this); //getting index value of array clicked
    //var buttonPress = $(this).text(); //getting text

    //console.log(buttonPress);
    buttonSelect(buttonPress);
  })
}

function buttonSelect(key){

  switch (key) {
    case 0:
    console.log("hi");
      $("#green").fadeOut();
      $("#green").fadeIn();
      break;
    case 1:
      $("#red").fadeOut();
      $("#red").fadeIn();
      break;
    case 2:
      $("#yellow").fadeOut();
      $("#yellow").fadeIn();
      break;
    case 3:
      $("#blue").fadeOut();
      $("#blue").fadeIn();
        break;

    default:

  }
}
  

Итак, я понял, что есть разница между прослушивателем событий jQuery и JavaScript, потому что, когда я извлек forloop для jQuery, все работало нормально, как и должно. если я нажимаю на что-то, оно воспроизводит это один раз, а не повторяет цикл.

  $(".btn").on("click",function(){
    var buttonPress = $(".btn").index(this); //getting index value of array clicked
    //var buttonPress = $(this).text(); //getting text

    //console.log(buttonPress);
    buttonSelect(buttonPress);
  });

function buttonSelect(key){

  switch (key) {
    case 0:
    console.log("hi");
      $("#green").fadeOut();
      $("#green").fadeIn();
      break;
    case 1:
      $("#red").fadeOut();
      $("#red").fadeIn();
      break;
    case 2:
      $("#yellow").fadeOut();
      $("#yellow").fadeIn();
      break;
    case 3:
      $("#blue").fadeOut();
      $("#blue").fadeIn();
        break;

    default:
  }
}
  

Я хочу понять разницу в том, почему jQuery выполняет цикл 4 раза, когда у меня есть forloop относительно Dom Javascript, которого нет.