Question

在我的for循环中，该循环遍历15个“盒子”对象，代码如下：

for (var i = 0; i < boxesLength; i++) {

我试图自动生成这些点击事件，它们过去是这样的：（一直到15个）

$("#box0").click(function(){
    var rw = 462;
    var input = $('#rw');
    input.val(rw);

    var rh = 310;
    var input = $('#rh');
    input.val(rh);
    calculateRectangle();
    calculateRectangle2();
});

现在，我正在尝试通过以下操作在for循环中自动生成这些代码：

$("#box" + i).click(function(){
    var rw = allBoxes[i].width;
    var input = $('#rw');
    input.val(rw);

    var rh = allBoxes[i].length;
    var input = $('#rh');
    input.val(rh);
    calculateRectangle();
    calculateRectangle2();
});

我在做什么错？当我使用控制台日志“ #box” +我获得预期的结果。

Answer 1

这是closures的示例。当您尝试单击一个按钮时，算法将使用i变量的最后一个值boxesLength。

要解决此问题，只需使用let关键字。

for (let i = 0; i < boxesLength; i++) {
     ^^^

Answer 2

另一个解决方案是这样的：

$("#box" + i).click(function(i){
return function(){
    var rw = allBoxes[i].width;
    var input = $('#rw');
    input.val(rw);

    var rh = allBoxes[i].length;
    var input = $('#rh');
    input.val(rh);
    calculateRectangle();
    calculateRectangle2();
}}(i));

在for循环内生成.click函数

2 个答案: