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

}

问题在于，无论我点击哪个框，它都会50为i或4 j。显然，eventlistener的附加工作正在发挥作用。我想知道的第二件事是：即使我告诉for循环在50之前停止，它仍然可以达到目的。我错过了什么或我应该做些什么？

P.S。语法应该是正确的。粘贴代码时遇到了一些麻烦。

Answer 1

这是一个经典的闭包问题，i或j的范围对于所有事件都是相同的，因此计数器到达循环的末尾，并且该值是所有得到的值。例如，一个解决方案是使用自执行功能，为每个事件处理程序创建一个范围：

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

);

Answer 2

在完成所有这些初始化后，您的事件回调将被触发，这意味着i = 50＆amp; J = 4。要摆脱这些，您可以尝试发送单击的元素，并从该dom find 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');
});

一次添加多个eventlisteners

3 个答案: