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

我有以下HTML和JavaScript，它适用于第一组元素，当我在选择器中有'1'但是当我用'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>

来源

2010-12-21 PhoenixDown

是否可以重现这个现场演示的问题？我建议无论是[JS小提琴]（http://jsfiddle.net）还是[JS Bin]（http://jsbin.com/）都是很好的免费协作选项。 – 2010-12-21 22:54:07

这是一个范围问题我在keyup上的值可能是14 – 2010-12-21 22:55:21

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

$("#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));

来源

2010-12-21 22:55:51

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

回答

相关问题