Question

这是我的代码：

function test(e, f) {
    for (var i = 0; i < e.length; i++) {
        $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>")
        $('#op' + i).click(function () {
            f[i]();
        })
    }
}


$(function postPunk() {
    var func1 = function () {
        alert('1');
    }
    var func2 = function () {
        alert('2');
    }
    var func3 = function () {
        alert('3');
    }
    test(['Option1', 'Option2', 'Option3'], [func1, func2, func3]);
})

点击事件不会调用这些功能。如果我在点击事件中发出警报测试，它会触发。

为什么这不起作用的任何想法？将函数数组作为参数传递似乎是一个问题。有更好的方法吗？

Answer 1

与此类型的所有其他问题一样，i会不断变化。

相反，试试这个：

for( var i=0; i<e.length; i++) {
    (function(i) {
        // your code that depends on i not changing
    })(i);
}

Answer 2

这似乎是典型的JavaScript问题，它们都是最后一个值（或undefined，因为f[3]不存在），因为这是i之后的值click循环。

尝试将函数引用直接传递给function test(e, f) { for (var i = 0; i < e.length; i++) { $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>") $('#op' + i).click(f[i]) } }处理程序。

或者，另一种解决方案是创建一个返回函数的函数。这将允许它“关闭”function test(e, f) { var makeFunc = function(i) { return function() { f[i](); } }; for (var i = 0; i < e.length; i++) { $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>") $('#op' + i).click(makeFunc(i)) } }。

{{1}}

Answer 3

回调函数中的代码在循环结束后使用i的值，因此它指向数组外的索引。您需要在循环中使用闭包，以便每次迭代都获得自己的变量实例：

function test(e, f) {
  for (var i = 0; i < e.length; i++) {
    $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>");
    (function(i){
      $('#op' + i).click(function () {
        f[i]();
      });
    })(i);
  }
}

Answer 4

以下是我如何使用它：http://jsfiddle.net/fH2Dk/3/

function test(e, f){    
     for(var i = 0; i < e.length; i++) {
         (function(i) {
            $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>");
            $('#op' + i).click(function(){
                f[i]();
            });
        })(i);    
    }
}

将一组函数作为参数传递

4 个答案: