一次添加多個eventlisteners

因此，我正在構建一個由可打開的部分組成的遊戲。我需要一個事件監聽器來處理每一個事件。有49件。這就是我計劃完成這項工作的方式：ID是box和inventory,+ 1到49。 for循環位於頁面加載時觸發的函數內。一次添加多個eventlisteners

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");

}

的問題是，哪一個框我點擊，它會隨時記錄50爲i或4爲j。很明顯，eventlistener的附件不起作用。我想知道的第二件事是：即使我告訴for循環在50之前停止，它仍然可以達到此目的。我錯過了什麼，或者我應該做什麼改變？

p.s.語法應該是正確的。在粘貼代碼時遇到了一些麻煩。

來源

2016-06-11 Petja Makkonen

這是一個典型的關閉問題，i或j的範圍對於所有事件都是相同的，所以計數器到達循環的結尾，並且該值是所有值。 A爲例的解決方案是，對每個事件處理程序創建一個範圍，自執行FUNC：

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

);

來源

2016-06-11 20:24:59

所有這些初始化已經完成我的意思後，你的事件回調被炒= 50 & J = 4。爲了擺脫這些，你可以嘗試發送被點擊的元素，並從那個找到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"); 
}

來源

2016-06-11 20:25:05

如果有什麼不按預期工作，讓我知道。

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'); 
});

來源

2016-06-11 22:04:06 Azamantes

一次添加多個eventlisteners

回答

相關問題