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

【问题标题】：Issue in rewriting scripts to be vanilla js (not jQuery)将脚本重写为 vanilla js（不是 jQuery）的问题
【发布时间】：2014-04-22 05:38:46
【问题描述】：

我一直在用 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]
    });
}

普通代码的问题是每次点击 .content .flair 元素总是使用来自 flairs 中最后一个元素的信息（即 flairs[flairs.length - 1] 而不是使用 flairs[i]。

我就是无法解决这个错误！

感谢您的宝贵时间。

【问题讨论】：

见stackoverflow.com/questions/750486/…
和developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…
@ArunPJohny 我很惊讶为什么会这样？嗯，在 for 循环之外声明 var 怎么样？
Why is the loop assigning a reference of the last index element to? 的可能副本

标签： javascript jquery javascript-events

【解决方案1】：

问题在于闭包。

感谢@Arun-P-Johny，请参阅SO - Closures 和MDN - Closures

【讨论】：

@ArunPJohny 干杯。这是一个 chrome 扩展，所以不需要 IE 支持:)
然后使用第二个版本
@ArunPJohny 因为flairs 是nodeList 而不是array，forEach 不是可用的方法，所以我只使用第一个版本see MDN NodeList跨度>

【解决方案2】：

处理这个问题的一个很好的选择是使用 slice 将你的 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)

【讨论】：