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

SirExotic спросил: 10 мая 2018 в 04:00 в: javascript

В упражнении, чтобы узнать о различных запросах AJAX, я хочу применить переход fade на мой #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");
    });
})

1 ответ

Есть решение
Jaime Macias ответил: 10 мая 2018 в 04:12

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

$("button").on('click', function(){
    $(quote).addClass("fade");
    $(quote).bind('oanimationend animationend webkitAnimationEnd', function(){ 
        $(this).removeClass("fade");
    });
});
SirExotic ответил: 10 мая 2018 в 04:26
Боже мой, теперь я вижу, как я был глуп. Я был настолько сосредоточен на .addEventListener из-за запросов AJAX, что полностью забыл о стандартном jQuery. Благодарю.
SirExotic ответил: 10 мая 2018 в 04:53
В конце концов я закончил с этим, и он отлично работает.