javascript - 将计数器传递给 for 循环中的 jQuery 单击函数

Question

下面的按钮在单击时会在控制台中输出其编号。 Fire 1 应输出 1，Fire 2 应输出 2，依此类推。

我使用 for 循环将 1–4 传递给调用 fire(n) 的函数，但当我单击任何一个时，输出永远不是我所期望的的按钮。我尝试遵循 this question 的答案，但它对我不起作用。

如果我使用注释掉的代码而不是 for 循环，一切都会正常工作。如果我使用 for 循环，为什么这不起作用？

function fire(n) {
    console.log(n);
}

for (var i = 1; i <= 4; ++i) {
    $("#fire" + i).on("click", fire(i));
}

/*
$("#fire" + 1).on("click", function(){fire(1)});
$("#fire" + 2).on("click", function(){fire(2)});
$("#fire" + 3).on("click", function(){fire(3)});
$("#fire" + 4).on("click", function(){fire(4)});
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="fire1">Fire 1</button>
<button id="fire2">Fire 2</button>
<button id="fire3">Fire 3</button>
<button id="fire4">Fire 4</button>

Answer 1

您需要将函数传递给点击处理程序。您正在传递未定义。这是因为 fire(i) 运行该函数，因此您将其返回值 - undefined - 设置为处理程序。

您需要为每次迭代生成一个新函数 - 一个闭包 - 以“捕获”每个 i 值。

function fire(n) {
    return function(){
        console.log(n);
    }
}

for (var i = 1; i <= 4; ++i) {
    $("#fire" + i).on("click", fire(i));
}

请注意，fire() 函数现在返回一些东西。它返回一个函数。每个点击处理程序都有不同的处理程序，“捕获”每次迭代的 i 值。