javascript - 无法使用 jquery 在循环内创建多个可删除元素

Question

我正在尝试在循环内创建许多可放置的元素。这是代码:

for (var i = 0; i < 10; i++) {
    for(var j = 0; j < 20; j++){

        $("#main").append( '<a  "href="javascript:void(0);" id="click'+i+'-'+j+'"  onclick="change_to_blocked('+i+','+j+')"><img id="image'+i+'-'+j+'" src="http://localhost/free.png" />');
        $("#main").append('');
        tmp1 = i;
        tmp2 = j;   
        $('#image'+i+'-'+j).droppable({

   drop: function(e,ui) {
        $('#image'+(i)+'-'+(j)).attr('src','/bot.png');
        console.log(i);

           }
  });
}
    $("#main").append('<br>');  }

但是，它仅适用于循环的最后一个值。

Answer 1

您需要创建一个闭包，否则在事件发生时，i 和 j 的值将是最后一个的值循环的迭代。

一种方法是将循环中的代码包装在 IIFE - 立即调用函数表达式

for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 20; j++) {

        (function (i, j) {
            $("#main").append('<a  "href="javascript:void(0);" onclick="return showIndexes('+i +','+j+')">Item # '+i+'-'+j+'</a><br>');
        })(i, j); //params used in the IIFE

    }
}

通过将值作为函数的参数传递，它们在函数中关闭，并且不会被后续迭代更改

为了清晰起见，省略了一些 html 渲染

当使用 jQuery 循环数组时，您可以使用 $.each 创建一个闭包，它将为您提供索引作为回调的第一个参数

DEMO