动态创建的元素 EventListener 上的对象修改问题

Question

在使用Vanilla Javascript动态创建的元素上使用事件侦听器时，我遇到了一个非常有趣的问题。我将首先定义问题，然后再发布代码。

我使用 javascript 创建动态 html 元素，在创建过程中，我在每个新创建的对象上添加"click"事件侦听器。在这个事件事件侦听器中，我更改了 GLOBAL 对象的不同属性。我的意思是，当您单击动态创建的元素时，每个元素都会修改此全局对象的不同属性。

这里出现问题，我动态选择全局对象的不同属性。因此，对于每个元素，它修改了全局对象的不同属性。但是当我运行代码时，我看到每个元素只更改全局对象的最新属性。这意味着每个元素更改该对象的相同属性，并且它是对象的最新属性。这里的代码：

var filter = {1:false, 4:false, 7:false, 11:false, 8:false} //global object
var productsAndIndexes = {a:1, b:4, c:7, d:11, e:8 } //another global object used for looping 
function createEmptyFilter(){
var hdr = document.querySelector("div.content .headers");
for(var product in productsAndIndexes){
var inp = document.createElement("input");
inp.setAttribute("type", "checkbox");
var filterInd = productsAndIndexes[product];
inp.addEventListener("click" , (e) => {
if(e.target.checked){
filters[ filterInd ] = true;
}else{
filters[ filterInd ] = false;
}
});
hdr.appendChild(inp);
}
}
createEmptyFilter();

每次我选中一个复选框时，我都会得到过滤器 = {1：假， 4：假， 7：假， 11：假， 8：真}.但相反，每个复选框都应修改其在对象中的相关部分。

感谢有关该问题的任何解释和解决方案(尽管我不是 15 次代表:)( 谢谢

Answer 1

问题是你的filterInd变量是用var声明的，这意味着它是函数作用域，而不是作用域到你的 for 循环块。这意味着每次循环迭代都将覆盖相同的变量，因此点击处理程序都关闭同一变量，而不是具有不同值的唯一变量。改为使用const或let声明它，click处理程序将引用循环迭代唯一的值。

既然你使用的浏览器足够现代，支持=>，那么你可能支持let和const;现在真的没有充分的理由使用var。

const filter = {1:false, 4:false, 7:false, 11:false, 8:false} //global object
const productsAndIndexes = {a:1, b:4, c:7, d:11, e:8 } //another global object used for looping 
function createEmptyFilter(){
const hdr = document.querySelector("div.content .headers");
for (let product in productsAndIndexes) {
const inp = document.createElement("input");
inp.setAttribute("type", "checkbox");
const filterInd = productsAndIndexes[product];
inp.addEventListener("click", e => {
if (e.target.checked) {
filters[filterInd] = true;
} else {
filters[filterInd] = false;
}
});
hdr.appendChild(inp);
}
}
createEmptyFilter();