• • 此问题在此处已有答案**：

JavaScript closure inside loops – simple practical example（44个答案）
14小时前关门了。
我想通过DOM添加一个JavaScript函数到我的主页。我正在使用一个Json字符串来获取元素。一切运行正常，但我有一个问题，JavaScript函数总是有相同的参数，无论我点击哪个按钮，参数都不会改变。参数总是jso字符串的最后一个值"name"。如何通过正确的方式迭代json并构建DOM文档？这是我代码

var jsonData = JSON.parse(jsonstring);
let element = document.getElementById("fi");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

for (var i = 0; i < jsonData.files.length; i++) {
  // Now create and append to iDiv
  var innerNameDiv = document.createElement('div');
  innerNameDiv.className = 'ccl ccu';
  innerNameDiv.style.float = "left";
  innerNameDiv.style.width = "45%";
  innerNameDiv.innerHTML = "&nbsp;&nbsp;" + jsonData.files[i].name;
  var innerFileSizeDiv = document.createElement('div');
  innerFileSizeDiv.className = 'cct ccu';
  innerFileSizeDiv.style.float = "left";
  innerFileSizeDiv.style.width = "30%";
  innerFileSizeDiv.textContent = jsonData.files[i].filesize;
  var innerButtonDiv = document.createElement('div');
  innerButtonDiv.className = 'ccr ccu';
  innerButtonDiv.style.float = "left";
  innerButtonDiv.style.width = "20%";
  var innerButtonDelete = document.createElement("button");
  innerButtonDelete.class = "b";
  innerButtonDelete.innerText = "Del";
  var filename = jsonData.files[i].name;
  innerButtonDelete.addEventListener('click', () => {
    deleteFile(filename)
  });
  innerButtonDiv.appendChild(innerButtonDelete);

  element.appendChild(innerNameDiv);
  element.appendChild(innerFileSizeDiv);
  element.appendChild(innerButtonDiv);

  console.log(jsonData.files[i].name + ":" + jsonData.files[i].filesize);
}

Json字符串例如：

{"files":[{"name":"1","filesize":32},{"name":"2","filesize":32},{"name":"3","filesize":32},{"name":"4","filesize":32}]}

无论我点击哪个按钮，它都会一直带有参数4，没有任何不同。