一次添加多个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

回答

相关问题