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

Question

我在使用 Vanilla Javascript 对动态创建的元素使用事件侦听器时遇到了一个非常有趣的问题。我先定义问题再贴代码。

我使用 javascript 创建动态 html 元素，并在创建过程中在每个新创建的对象上添加“单击”事件侦听器。在此事件事件侦听器中，我更改了 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();

每次我选中一个复选框时，都会得到 filter = {1:false, 4:false, 7:false, 11:false, 8:true}。但是每个复选框都应该修改其在对象中的相关部分。

感谢任何有关该问题的解释和解决方案（尽管我不是 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();