複数のイベントリスナーを一度に追加する

Question

私はオープン可能な部分で構成されるゲームを構築しています。私はそれぞれのイベントリスナーが必要です。 49個あります。これは私がこれを達成する方法です：IDはboxとinventory,+ 1から49です。 forループは、ページの読み込み時に起動する関数の内部にあります。

for(var i = 1; i < 50; i++){ 
    document.getElementById("box" + "" + i).addEventListener('click', function(){ 
     addImgBox(i); 
    }); 
} 

for(var j = 1; j < 4; j++){ 
    document.getElementById("inventory" + "" + j).addEventListener('click', function(){ 
     addImgInv(j); 
    }); 
} 

function addImgInv(j){ 
    console.log(j); 
    $('#inventory' + '' + j).prepend('<img class="img" src=' +  hero.inventory[j - 1].picture + ' />'); 
    $("#theImg" + "" + j).addClass("img"); 
} 

function addImgBox(i){ 
    console.log(i); 
    $('#box' + '' + i).prepend('<img class="img" src=' + levelToPlay[i - 1].picture + ' />'); 
    $("#theImg" + "" + i).addClass("img"); 

}

問題は、それが常にiまたはjため4ため50をログに記録し、いずれかのボックス私はをクリックしていることです。明らかにeventlistenerの添付が機能していません。私が疑問に思っているもう一つのことは、50の前にループを停止するようにforと言っていますが、それでもそれは起こります。私は何が不足しているのですか？何が違うのでしょうか？

p.s.構文は正しいはずです。コードを貼り付けるのにいくつかの問題がありました。

Answer 1

これは古典的なクロージャの問題です.iまたはjのスコープはすべてのイベントで同じになるため、カウンタはループの最後に到達し、その値はすべて値を取得します。

document.getElementById("inventory" + "" + j).addEventListener('click', 
    function(index){ 
     return function(){ addImgInv(index); 
    }(j) 
    } 

); 

Answer 2

これらすべての初期化を意味し、私が行われた後、あなたのイベントコールバックが解雇されている= 50 & J = 4：例のためのソリューションは、各イベントハンドラのスコープを作成し、自己実行FUNCです。これらを取り除くには、クリックされた要素を送信して、そのdomからid/indexを見つけて、あなたの行動を実行しようとするかもしれません。このようなもの：（テストしていません）

document.getElementById("box" + "" + i).addEventListener('click', function() { 
    addImgBox($(this)); 
}); 

function addImgBox(el) { 
    var index = el.attr('id'); 
    el.prepend('<img class="img" src=' + levelToPlay[index - 1].picture + ' />'); 
    $("#theImg" + "" + index).addClass("img"); 
} 

Answer 3

何かが意図したとおりに動作しない場合は、私にお知らせください。

window.addEventListener('click', function(event) { 
    const target = event.target; 
    const valid = /^(box|inventory)([1-9]|[1-4][0-9])$/; // 1 - 49 
    const id = target.id; 

    if(!valid.test(id)) { // invalid ID 
     return; 
    } 

    const pattern = "<img class='img' src='#'>"; 
    let number, string; 

    if(/box/.test(id)) { 
     number = +id.match(/[0-9]+/)[0]; 
     string = pattern.replace(/#/, levelToPlay[number - 1].picture); 
     $('#box' + number).prepend(string); 
    } else { 
     number = +id.match(/[0-9]/)[0]; 
     string = pattern.replace(/#/, hero.inventory[number - 1].picture; 
     $('#inventory' + number).prepend(string); 
    } 

    $('#theImg' + number).addClass('img'); 
});