javascript - 变量未传递给函数

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 5 年前。

我目前有执行此操作的代码:

$('#BoxShadow_1').click(function()
{
addDivBoxShadow('BoxShadow_1');
});

$('#BoxShadow_2').click(function()
{
addDivBoxShadow('BoxShadow_2');
});

...等 10 个相似元素。它工作得很好。

我也在使用 JQuery。

我想将代码更改为如下所示:

for (i = 1; i < 11; i++) {

    $('#BoxShadow_' + i).click(function(){
      addDivBoxShadow("BoxShadow_" + i);
    });

}

挑战是这样的:

BoxShadow_10 分配给所有 div，而不是 BoxShadow_1、BoxShadow_2 等。

仅供引用，我尝试实现的代码是我在以下 URL 编写的数学游戏:

tinyurl.com/sashamath

提前致谢。我希望将来能做出贡献。

好的，这就是答案，使用“let”语句如下:

for (let i = 1; i < 11; i++) {

    $('#BoxShadow_' + i).click(function(){
      addDivBoxShadow("BoxShadow_" + i);
    });

}

Answer 1

循环的问题是经典的“循环回调”问题。 '

但是你根本不需要循环。只需使用 this 的 id 属性即可获取 ID。

function handler() {
  addDivBoxShadow(this.id);
}

$('#BoxShadow_1').click(handler);
$('#BoxShadow_2').click(handler);

<小时/>

或者如果你将addDivBoxShadow函数改为使用this来获取元素，则可以直接传递它。

$('#BoxShadow_1').click(addDivBoxShadow);
$('#BoxShadow_2').click(addDivBoxShadow);

现在 addDivBoxShadow 可以使用 this 来引用绑定(bind)元素，并且它还将接收 event 对象作为参数。

<小时/>

当然也可以使用单个选择器来完成。

$('#BoxShadow_1, #BoxShadow_2').click(addDivBoxShadow);