Question

我一直在用vanilla代码而不是jQuery重写我的Chrome扩展程序，而且大部分都很容易。我怎么会碰到一个不按预期工作的部分。

基于jQuery的原始代码：

$(".content .flair").click(function(){
    //Irelevant code using "this"
});

仅限新香草的代码：

var flairs = document.querySelectorAll(".content .flair");
for (var i = 0; i < flairs.length; i++){
    flairs[i].addEventListener("click", function(event){
        //Irrelevant code using flairs[i]
    });
}

vanilla代码的问题在于，.content .flair元素上的每次点击始终使用flairs中最后一个元素的信息（即flairs[flairs.length - 1]而不是flairs[i]。

我无法压制这个错误！

感谢您的时间。

Answer 1

问题出在闭包上。

感谢@ Arun-P-Johny，见SO - Closures和MDN - Closures

Answer 2

处理此问题的一个很好的选择是使用切片将DOM元素列表转换为正确的数组：

var buttonElementList = document.querySelectorAll('button');
// not a real array, so .forEach will not work

var buttonElementArray = Array.prototype.slice.call(buttonElementList);
// returns an array, can call .forEach or .map (or use .length)

将脚本重写为vanilla js（不是jQuery）的问题

2 个答案: