javascript - 在循环内迭代函数的参数

Question

这里是 JS Nooblord，为了提供一些上下文，我最近创建了第一个基于 JQuery 的图像 slider ，目前我正在尝试在页面加载时动态生成控制按钮列表。

到目前为止，我已经成功创建了按钮，但是在编写 onclick 函数时，我在 for 循环内调用另一个函数(带有参数)时遇到问题。

我不擅长解释事情，但这是代码；

function addControls(){
    var x = document.getElementById('slider').childElementCount; 
    for (var i = 0; i < x; i++) {
        var ul = document.getElementById('slider-control');
        var li = document.createElement("li");
        var btn = document.createElement("Button");

        btn.onclick = function() { 
            goto(i); 
        };

        btn.appendChild(document.createTextNode(i + 1));
        ul.appendChild(li);
        li.appendChild(btn);
    }
}

function goto(index){
    alert(index);
}

这是JSFiddle预览。

我期望每个按钮都使用循环中各自的位置来调用 goto 函数，但是每个使用 onclick 函数生成的按钮都使用循环 (4) 中的最后一个索引。

我最初的想法是按钮是在循环完成后渲染的，而不是在循环的每次迭代中渲染的？另外，如果有人对我正在做的事情有任何提示和替代方案，我将不胜感激。

谢谢

-多德

Answer 1

正如评论Mikelis Baltruks ，您必须使用 .bind。

你可以使用

goto.bind(null, i+1)

仅将索引映射到它。如果您也想获得该按钮，可以使用

goto.bind(btn, i+1)

Sample JSFiddle

绑定(bind)

.bind 用于更改函数的上下文。它的语法是

functionName.bind(context, argumentList);

这将创建具有新绑定(bind)上下文的函数引用。

您还可以使用 .apply 来完成此任务。不同之处在于，apply 期望参数为数组，bind 期望参数为逗号分隔的列表。

注意:这两个函数都只会注册事件而不调用它。

引用

• .bind
• .apply
• call() & apply() vs bind()