3

これが私のコードです：

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]);
})

クリック イベントは関数を呼び出していません。クリック イベントにアラート テストを配置すると、正常に起動します。

これが機能しない理由はありますか？関数の配列をパラメーターとして渡すことに問題があるようです。これを行うより良い方法はありますか？

4

4 に答える 4

8

このタイプの他のすべての質問と同様に、i変化し続けます。

代わりに、これを試してください：

for( var i=0; i<e.length; i++) {
    (function(i) {
        // your code that depends on i not changing
    })(i);
}
于 2012-08-17T18:14:34.267 に答える
4

これは、ループ後の値であるため、すべてが最後の値である (または存在undefinedしf[3]ない)という古典的な JavaScript の問題のようです。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])
    }
}

または、別の解決策は、関数を返す関数を作成することです。これにより、 を「閉じる」ことができ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))
    }
}
于 2012-08-17T18:14:49.220 に答える
1

コールバック関数のコードは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);
  }
}
于 2012-08-17T18:19:49.570 に答える
0

これが私がそれを機能させる方法です：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);    
    }
}
于 2012-08-17T18:22:06.850 に答える