обработка нескольких элементов одним списком событий javascript - PullRequest
Новая
       15

обработка нескольких элементов одним списком событий javascript

0 голосов
/ 08 февраля 2020

Я новичок в JavaScript, и я делаю проект, следуя обучающему видео.

Я не могу понять, как добавить eventlisntner к нескольким элементам. Этот код ниже, когда происходит keydown, .playing из css добавит к ключевой переменной. 

window.addEventListener('keydown', function(e){
const audio = document.querySelector(`audio[data key="${e.keyCode}"]`)
if(!audio){
  return;
}

const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
audio.currentTime = 0;//rew ind to the start
audio.play();
key.classList.add('playing');


})

, и это код удаления стиля css из них, и он будет работать сразу, когда код выше работает. 

function removeTransition(e){
    if (e.propertyName !== 'transform') return;//skip if its transform
    this.classList.remove('playing')

}


const keys = document.querySelectorAll('.key');  
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

, но когда я удаляю .playing из HTML, почему я должен добавить forEach для addEventListner? Инструктор говорил, что мне нужно указать какой ключ, но мне интересно, почему первый код работает без forEach, хотя в нем есть несколько элементов.

. Это игра в css 

.playing {
transform: scale(1.1);
border-color: #ffc600;
box-shadow: 0 0 1rem #ffc600;
}

Я надеюсь, что вы, ребята, могли бы решить этот вопрос, большое спасибо.

1 Ответ

0 голосов
/ 08 февраля 2020

Это знакомо, это проект Drum Kit от Wes? xD

Хорошо. Сначала вы добавляете игровой класс к любой клавише, если она нажата, класс воспроизводит переход по клавише (кнопка на GUI). Для части forEach () он ожидает завершения перехода (проигрываемого игровым классом), после чего удалит класс из всех кнопок, чтобы вы могли добавить его обратно при повторном нажатии клавиши. Если вы добавите класс к элементу, не удаляя его, элемент вступит в силу только один раз, если вы нажмете клавишу еще раз, с кнопкой ничего не произойдет. Это потому, что метод classList.add () добавит класс к элементу тогда и только тогда, когда этот класс еще не находится внутри элемента.

Надеюсь, я вас больше не запутаю.

...