Question

当我在选择器中有'1'时，我有以下HTML和JavaScript适用于第一组元素但是当我用'i'替换'1'时它不会将自身附加到任何要素。关于为什么这可能不起作用的任何想法？（该脚本用于添加每行的前3列并在第四行中显示）

<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script>
  $(document).ready(function(){

    for (i = 2; i <= 14; i++)
    {
      $("#Q19_LND_"+i).keyup(function(){
        $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
      });

      $("#Q19_CE_"+i).keyup(function(){
        $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
      });

      $("#Q19_SOLSD_"+i).keyup(function(){
        $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
      });

    }

  });
</script>

</head>

<body>

<table>
  <tr>
    <td><font face="arial" size="-1">Lap Roux-N-Y</font>&nbsp;</td>
    <td align="center"><input tabindex="1" type="text" name="Q19_LND_1" size="3" value="" id="Q19_LND_1"></td>
    <td align="center"><input tabindex="2" type="text" name="Q19_CE_1" size="3" value="" id="Q19_CE_1"></td>
    <td align="center"><input tabindex="3" type="text" name="Q19_SOLSD_1" size="3" value="" id="Q19_SOLSD_1"></td>
    <td align="center"><input tabindex="4" disabled  type="text" name="autoSumRow_1" size="3" value="" id="autoSumRow_1"></td>
  </tr>
  <tr>
    <td nowrap width="1" bgcolor="#006699" colspan="9"><img src="/images/wi/nothing.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td><font face="arial" size="-1">Lap Esophagectomy</font>&nbsp;</td>
    <td align="center"><input tabindex="5" type="text" name="Q19_LND_2" size="3" value="" id="Q19_LND_2"></td>
    <td align="center"><input tabindex="6" type="text" name="Q19_CE_2" size="3" value="" id="Q19_CE_2"></td>
    <td align="center"><input tabindex="7" type="text" name="Q19_SOLSD_2" size="3" value="" id="Q19_SOLSD_2"></td>
    <td align="center"><input tabindex="8" disabled  type="text" name="autoSumRow_2" size="3" value="" id="autoSumRow_2"></td>
  </tr>
  <tr>
</table>

</body>
</html>

Answer 1

这是在循环中创建的闭包的常见问题。如果我们以其中一个为例：

$("#Q19_LND_"+i).keyup(function(){
   $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val()));
});

在循环完成后，稍后调用keyup的处理函数。这意味着i的值为15，因此它总是在搜索id为“autoSumRow_15”的元素。此问题的常见解决方法是创建一个传递当前值i的临时函数，但在您的情况下，您可以利用jQuery的功能将数据与事件一起传递。你会做这样的事情：

$("#Q19_LND_"+i).keyup({index: i}, function (e) {
    var index = e.data.index;
    $("#autoSumRow_"+index).val(Number($("#Q19_LND_"+index).val()) + Number($("#Q19_CE_"+index).val()) + Number($("#Q19_SOLSD_"+index).val()));
});

如果您感兴趣，我提到的（更通用的）临时功能替代方案可以这样做：

$("#Q19_LND_"+i).keyup((function (index) {
    return function () {
        $("#autoSumRow_"+index).val(Number($("#Q19_LND_"+index).val()) + Number($("#Q19_CE_"+index).val()) + Number($("#Q19_SOLSD_"+index).val()));
    };
}) (i));

将函数附加到循环中的元素

1 个答案: