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

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

一种方法是将代码包含在IIFE - Immediately Invoked Function Expression

中的循环中

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

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

1 个答案: