0

这段代码困扰了我一整天。假设 ledCount = 9，代码通过 ID 获取元素没有任何问题，但是由于它必须绑定一个单独的函数 onClick，并且由于变量 i 是本地变量，因此 writeLED 函数总是获取第一个参数 10（即 max i+1)，但它需要获取当前的 i+1，就像 getElementBy id 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 回答