Невозможно создать несколько исключаемых элементов внутри цикла с использованием 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

Вам необходимо создать 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