Как правильно перебрать NodeList из document.querySelectorAll ()?

Question

В упражнении, чтобы узнать о различных AJAX-запросах, я хочу применить плавный переход к своему #quote при каждом нажатии кнопки. (эффект затухания не является частью упражнения, я просто добавил его от своего имени)

Codepen

Я знаю, как это сделать, когда есть одна кнопка (или только первая кнопка) с document.querySelector(), но я узнал, что document.querySelectorAll() возвращает статический NodeList в виде массива, и вам нужно будет перебиратьмассив, чтобы сделать что-то с каждой кнопкой.

Я пробовал несколько вещей, но я не могу понять это.

Это то, что у меня так далеко, и насколько японимаю, что эти 2 бита кода должны быть внутри друг друга, и мой вопрос как .

// Quote animation
var buttons = document.querySelectorAll("button");

[].forEach.call(buttons, function(button){
  // quote should have .fade applied every time one of the four buttons is clicked
});

$(button).addEventListener("click", function(){
    $(quote).addClass("fade");
    $(quote).bind('oanimationend animationend webkitAnimationEnd', function(){ 
        $(this).removeClass("fade");
    });
})

Answer 1

Это выберет каждую кнопку и вызовет эффект затухания

$("button").on('click', function(){
    $(quote).addClass("fade");
    $(quote).bind('oanimationend animationend webkitAnimationEnd', function(){ 
        $(this).removeClass("fade");
    });
});