Javascript 无法使用jquery在循环内创建多个可拖放元素

我试图在一个循环中创建许多可拖放的元素。代码如下：

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

for（变量i=0；i<10；i++）{
对于（var j=0；j<20；j++）{
$（“#main”）.append（“您需要创建一个
闭包
，否则在事件发生时，
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

    }
}

for（变量i=0；i<10；i++）{
对于（var j=0；j<20；j++）{
（功能（i，j）{
$（“#main”）.append（“
”）；
})（i，j）；//生活中使用的参数
}
}

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

为了清晰起见，省略了一些html呈现

使用jQuery在数组上循环时，您可以使用
$创建一个闭包。每个
都将为您提供索引作为回调的第一个参数

通常的方法是在drop函数中使用$（this）而不是$（'#image'+（i）+'-'+（j））。