Question

在练习了解不同的AJAX请求时，我想在每次点击按钮时对#quote应用淡入淡出过渡。 （褪色效果不属于练习，只是我自己添加的内容）

我知道当有一个按钮（或只是第一个按钮）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");
    });
});

如何从document.querySelectorAll（）正确循环NodeList？

1 个答案: