如何最好地處理循環和addEventListeners？

-1

我的上一個問題 - Why JavaScript alerts allways 4 in when for-loop is for 3? - 顯示它極其難以趕上forE循環在JS for addEventListeners，所以我帶着一個蠻力的解決方案...我該如何適當地循環它和讓它易於閱讀新手？如何最好地處理循環和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'; 
}

來源

2012-09-13 Szymon Toda

很難得到我。對我來說，最好的理解就是當我向你展示簡單的代碼時，它的工作，並詢問如何改進它。 –

你爲什麼不使用你早期問題的解決方案之一？我知道關閉對於新手來說並不容易，但如果你要做很多Javascript，你需要了解它們。 – Barmar

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

這樣做是因爲一個名爲name任何頂級函數或變量是window[name]值。

來源

2012-09-14 00:38:07 Barmar

下面是一個使用循環的解決方案：

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-14 02:23:31 banzomaikaka

如何最好地處理循環和addEventListeners？

回答

相關問題