javascript - for循环将点击功能添加到jQuery中的多个输入字段未按预期工作

Question

我有多个复选框需要充当单选按钮。 复选框字段的数量可能会有所不同，因此我尝试使用 for 循环来遍历它们。

当我使用下面的代码时，一切正常

$("input[name='item_meta[221][0][253][]']").on('click', function() {$("input[name='item_meta[221][0][253][]']").not(this).attr('checked', false)});
$("input[name='item_meta[221][1][253][]']").on('click', function() {$("input[name='item_meta[221][1][253][]']").not(this).attr('checked', false)});
$("input[name='item_meta[221][0][268][]']").on('click', function() {$("input[name='item_meta[221][0][268][]']").not(this).attr('checked', false)});
$("input[name='item_meta[221][1][268][]']").on('click', function() {$("input[name='item_meta[221][1][268][]']").not(this).attr('checked', false)});

但是，这意味着如果我有 10 个这样的复选框组，我将需要为每个复选框编写 10 行。所以我尝试用这样的 for 循环做同样的事情:

for (i=0; i < 1; i++){
     $("input[name='item_meta[221][" + i + "][253][]']").on('click', function() {$("input[name='item_meta[221][" + i + "][253][]']").not(this).attr('checked', false)});
     $("input[name='item_meta[221][" + i + "][268][]']").on('click', function() {$("input[name='item_meta[221][" + i + "][268][]']").not(this).attr('checked', false)});
}

但是当我使用它时，它不起作用？! 那我错过了什么？？

Answer 1

用 let 试试吧。

说明:代码中的变量i，是一个全局变量(用var声明)。与 let 不同，var 不支持 block 作用域。单击事件实际上是在第一次单击按钮时绑定(bind)的，而不是在 for 循环执行时绑定(bind)的。由于 i 是一个全局变量，它已经通过循环迭代并且它的值变成了 10。当按钮被点击时，按钮被绑定(bind)到 input[name='item_meta[221] [10][268][]'] 不存在。这就是使用 let 的原因，因为它支持 block 范围，并保留其绑定(bind)事件的值。

for (let j = 0; j < 10; j++) {
  $("input[name='item_meta[221][" + j + "][253][]']").on('click', function() {
    $("input[name='item_meta[221][" + j + "][253][]']").not(this).attr('checked', false)
  });
  $("input[name='item_meta[221][" + j + "][268][]']").on('click', function() {
    $("input[name='item_meta[221][" + j + "][268][]']").not(this).attr('checked', false)
  });
}