javascript - 使用 for 循环创建多个函数

Question

首先，我确实找到了几个似乎可以解决此问题的链接，但我对 javascript(以及一般代码)的理解非常糟糕，并且我很难在这里概括解决方案/解释。我知道这与闭包有关(我模糊地理解)。

背景:我使用循环创建了 10 个复选框，每个复选框都有 4 个单选按钮，在选中该复选框时应该会出现这些单选按钮。我可以通过一一创建 10 多个函数来完成“出现/消失”，但我更喜欢用循环创建我的十个函数。下面的代码显示了每个复选框如何在更改时调用变量函数(例如 t0Disp())。

<?
for ($row = 0; $row <10; $row++)
{
  $topic = $topic[$row];
  ?>
  <input id="C<? echo $row ?>" type="checkbox" value="true" onchange="t<? echo $row ?>Disp()" /><? echo $topic ?>
  <br />
  <div id="<? echo $row ?>div" style="display: none">
      <? for ($col = 0; $col < 4; $col++) 
    {
      ?>
      <input type="radio" name="r<? echo $row ?>" value="<? echo $col ?>" onchange="disable<? echo $col ?>(); disable<? echo $row ?>();" />
      <? echo $col+1; ?>
    <?
    }
    ?>
      <br />
      <br />
  </div>
<?
}
?>

如果我通过 t9Disp() 函数手动输入 t0Disp() ，上面的代码可以正常工作。当我尝试创建 for 循环来创建这些函数(如下)时，该函数仅适用于 t9Disp()

for (var i=0; i<10; i++) {
    var idiv = i + "div";
    var eldiv = document.getElementById(idiv);
    var ci = "C" + i;
    var elci = document.getElementById(ci);
    window['t' + i + 'Disp'] = function() {
        if(elci.checked == true) {
            eldiv.style.display = "inherit";
        }
        else {
            eldiv.style.display = "none";
        }
    }
}

我只需要理解为什么 javascript 循环不只是像我的 php 循环吐出 10 个不同的复选框那样吐出 10 个不同的函数？

谢谢!

Answer 1

你的问题是 var 被提升，所以你确实得到十个不同的函数，每个函数都指向一个共享变量......它指向最后一组复选框。

解决您的问题的第一个解决方案是使用let或const(如果您只需要支持现代浏览器):

for (var i=0; i<10; i++) {
    const idiv = i + "div";
    const eldiv = document.getElementById(idiv);
    const ci = "C" + i;
    const elci = document.getElementById(ci);
    window['t' + i + 'Disp'] = function() {
        if(elci.checked == true) {
            eldiv.style.display = "inherit";
        }
        else {
            eldiv.style.display = "none";
        }
    }
}

但是，您还可以做更多事情:

const checkboxes = document.querySelectorAll('.js-showChoices');
[].slice.apply(checkboxes).forEach(checkbox => {
  checkbox.addEventListener('change', event => {
    if (event.target.checked) getDivFor(event.target).style.display = 'inherit';
    else getDivFor(event.target).style.display = 'none';
  });
});

function getDivFor(checkbox) {
  // Find div based on checkbox and return it
}