-1

我之前的问题 -为什么 JavaScript 在 for-loop 为 3 时总是提示 4？- 表明它非常难以赶上 JS 中的 for-loops for addEventListeners，所以我提出了一个粗暴的解决方案......我怎样才能正确循环它并让新手易于阅读？

document.getElementById('layerChangerOryginal').addEventListener('click', function() { Layer1() });
document.getElementById('layerChanger1').addEventListener('click', function() { Layer1() });
document.getElementById('layerChanger2').addEventListener('click', function() { Layer2() });
document.getElementById('layerChanger3').addEventListener('click', function() { Layer3() });

function Layer1() {
    document.getElementById('oryginalLayer1').className='container layer1';
    document.getElementById('oryginalLayer2').className='container layer2';
    document.getElementById('oryginalLayer3').className='container layer3';
}
function Layer2() {
    document.getElementById('oryginalLayer1').className='container layer3';
    document.getElementById('oryginalLayer2').className='container layer1';
    document.getElementById('oryginalLayer3').className='container layer2';
}
function Layer3() {
    document.getElementById('oryginalLayer1').className='container layer3';
    document.getElementById('oryginalLayer2').className='container layer2';
    document.getElementById('oryginalLayer3').className='container layer1';
}
4

2 回答 2

2 
for (var i = 1; i <= 3; i++) {
  document.getElementById('layerChanger'+i).addEventListener('click', window['Layer'+i]);
}

这是有效的，因为任何名为的顶级函数或变量name都是window[name].

于 2012-09-14T00:38:07.747 回答
0

这是使用循环的解决方案：

var a, i, j,
    eventFunc, 
    args_list = [[1, 2, 3], [3, 1, 2], [3, 2, 1]],

    str1 = 'container layer',
    str2 = 'oryginalLayer',
    byId = function(x) {
        return document.getElementById(x);
    };


for (i = 1; i < 4; ++i) {
    eventFunc = function() {
        for (j = 1; j < 4; ++j) {
            byId(str2 + j).className = str1 + args_list[i][j];
        }
    };

    byId('layerChanger' + i).addEventListener('click', eventFunc, false);

    if (i === 1) {
        byId('layerChangerOryginal').addEventListener('click', eventFunc, false);
        ++i;
    }
}​

似乎比下面的等效代码复杂一点：

var str = 'container layer',
    byId = function (x) {
        return document.getElementById(x);
    },

    createLayerFunc = function ( a, b, c ) {
        return function LayerX(x) {
            byId('oryginalLayer1').className = str+a;
            byId('oryginalLayer2').className = str+b;
            byId('oryginalLayer3').className = str+c;
        };
    },

    Layer1 = createLayerFunc(1, 2, 3),
    Layer2 = createLayerFunc(3, 1, 2),
    Layer3 = createLayerFunc(3, 2, 1);


byId('layerChangerOryginal').addEventListener('click', Layer1, false);
byId('layerChanger1').addEventListener('click', Layer1, false);
byId('layerChanger2').addEventListener('click', Layer2, false);
byId('layerChanger3').addEventListener('click', Layer3, false);
于 2012-09-14T02:23:31.767 回答