Question

我希望console.log的代码与点击元素中显示的数字相同但是，如果我点击任何元素，我会在日志中获得9（Chrome 60）。

为什么会这样？

我知道i不应该在回调函数中使用，因为它会在执行此事件处理程序时被更改。
但是x不应该正常工作吗？ value属性是基元，x是局部变量，如何在外部更改。

for (var i = 0; i < 10; i++)
{
  var x = {
    value: i
  };
  
  $("<div/>").text(i).appendTo("body").click(function() {
    console.log(x.value);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

似乎使用let为我解决了这个问题，但在这种情况下，var不应该与局部变量的行为相同吗？

Answer 1

您可以使用x将.data()对象分配给动态创建的jQuery对象，click处理程序使用$(this).data().value或$(this).data("value")访问对象

＆＃13;

for (var i = 0; i < 10; i++) {
  var x = {
    value: i
  };

  $("<div/>")
  .data(x)
  .text(i)
  .appendTo("body")
  .click(function() {
    console.log($(this).data().value);
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

＆＃13;

循环中的局部对象变量闭包

1 个答案: