0

このコードは一日中私を悩ませていました。ledCount = 9 としましょう。コードは問題なく ID で要素を取得しますが、別の関数 onClick をバインドする必要があり、変数 i がローカルであるため、writeLED 関数は常に最初のパラメーター 10 (最大値) を取得します。 i+1) ですが、getElementBy id i+1 のように、現在の i+1 を取得する必要があります。誰でもパズルを解くことができますか？

function showLED(ledCount){
for(var i = 0;i<=(ledCount-1);i++){
    if(color[i] == 0){
        document.getElementById('buttonLED'+(i+1)).onclick = function(){writeLED((i+1),1); } ;
        document.getElementById('buttonLED'+(i+1)).value="light is on";
    }else{
        document.getElementById('buttonLED'+(i+1)).onclick = function(){writeLED((i+1),0); } ;
        document.getElementById('buttonLED'+(i+1)).value="light is off";
    }
}
}
4

2 に答える 2

3

インクリメント関数の現在の値を保持できる新しいスコープを作成するには、自己実行関数でラップする必要があります。

次のようにインラインで実行できます。

document.getElementById('buttonLED'+(i+1)).onclick = function(loopincrement){   
    return function(){writeLED((loopincrement+1),1); } ;

}(i)

または、次のような引き出された関数として:

function writeLEDInNewScope(inc){
    return function(){ writeLED(inc,1)};
}

document.getElementById('buttonLED'+(i+1)).onclick = writeLEDinNewScope(i+1);

外側の関数は、内側の onclick 関数の i 値の現在の値を保持します。これはすぐに実行され、onclick プロパティにバインドする内部関数を返します。変数への参照を維持しますがloopincrement、将来のループ反復によって影響を受けることはありません。

于 2013-03-09T21:40:26.397 に答える
1

これは悪名高い for ループの問題です。次のようにコードを書き直す必要があります。

function callback(x) {
    return function() { writeLED(x, 1); };
}

function showLED(ledCount) {
    for (var i = 0; i <= (ledCount - 1); i++)(function(i) {
        if (color[i] == 0) {
            document.getElementById('buttonLED' + (i + 1)).onclick = callback(i + 1);
            document.getElementById('buttonLED' + (i + 1)).value = "light is on";
        } else {
            document.getElementById('buttonLED' + (i + 1)).onclick = callback(i + 1);
            document.getElementById('buttonLED' + (i + 1)).value = "light is off";
        }
    })(i);
}
于 2013-03-09T21:43:14.257 に答える