为什么 JavaScript 中基于循环的点击处理程序有时会显示意外的值？

在循环中处理点击事件：了解闭包陷阱

将点击处理程序分配给具有循环的多个元素时，必须注意JavaScript 的闭包机制。一个常见的错误是在循环中创建闭包而不使用回调函数。这可能会导致意外的行为。

在提供的代码片段中：

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( function(){
      alert('you clicked ' + i);
    });
  }
});

预期的行为是单击 #mydiv3 将显示“您单击了 3”。但是，代码错误地使用了 i 变量，它是循环中的全局变量。因此，i 变量的最终值为 20，从而导致错误的警报消息。

在循环中分配点击处理程序的正确方法是使用回调函数。这些函数可以为 i 变量创建一个新的作用域，确保循环的每次迭代都有自己的 i 实例。

function createCallback(i){
  return function(){
    alert('you clicked ' + i);
  }
}

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click(createCallback(i));
  }
});

如果使用 ES6，另一个现代解决方案是利用 let 关键字为循环的每次迭代创建一个局部变量：

for(let i = 0; i < 20; i++) {
  $('#question' + i).click( function(){
    alert('you clicked ' + i);
  });
}

这种方法更干净、更容易理解。它确保每个点击处理程序都有自己的 i 变量，消除闭包陷阱并确保在循环中处理点击事件时的正确行为。

以上是为什么 JavaScript 中基于循环的点击处理程序有时会显示意外的值？的详细内容。更多信息请关注PHP中文网其他相关文章！