javascript/jquery for 循环不适用于极其复杂的表达式

Question

我有这个 JavaScript:

<script>
$("#P1").on("blur", function(){$("#Y1").val(getClass(this));});
$("#P2").on("blur", function(){$("#Y2").val(getClass(this));});
$("#P3").on("blur", function(){$("#Y3").val(getClass(this));});
$("#P4").on("blur", function(){$("#Y4").val(getClass(this));});
<script>

它是用 jquery 编写的。我想在 for 循环中对其进行标记。我已经尝试了几种语法迭代，但我找不到适用于复杂表达式的语法。

<script>
var i;
for (i = 0; i < 5; i++) {
$("#P" +i).on("blur", function(){$("#Y" +i).val(getClass(this));});
}
</script>

这怎么行不通？

Answer 1

在 for 循环结束时，i 的值为 5，因此每次调用 blur 处理程序时，解释器都会将看到值为 5 的 i - 如果您只有 #Y1-4，则 #Y5 不存在。

使用 let 代替，它具有 block 作用域而不是函数作用域，以便每次迭代都有一个单独的 i 绑定(bind):

for (let i = 1; i < 5; i++) {
  $("#P" + i).on("blur", function(){
    $("#Y" + i).val(getClass(this));
  });
}

当您使用 for 循环时，请始终使用 let (如果可以的话，请使用 const)，特别是在涉及异步内容时。 (实际上，无论如何，您都应该在任何地方使用 let 或 const，但使用 for 来避免错误尤其重要)