-1

以前の質問 - for-loop が for 3 の場合、なぜ JavaScript は常に 4 をアラートするのですか? - addEventListeners の JS の for ループに追いつくのが非常に難しいことを示しているので、私は野蛮な解決策を思い付きました...どのように適切にループして、初心者が読みやすいように保つことができますか?

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 に答える