JS IndexedDB Schließung/innere Funktion

Question

Ich würde gerne verstehen, warum in dieser "Schleife" kann ich nicht den Schlüssel des Elements in einem Ereignis mit einer Schließung/innere Funktion befestigen. Ich weiß, was mit anderen Loops wie for,while passiert ... Ich verstehe nicht den wahren Grund, warum dieser Ansatz in dieser Situation nicht funktioniert.

F: Warum kann ich den Schlüssel nicht direkt übergeben?

item.transaction(["itens"], "readonly").objectStore("itens").openCursor() 
       .onsuccess = function(e) { 
        var info = e.target.result; 
        if (info) { 


         var div = document.createElement("div"); 
         var img = document.createElement("img"); 
         var h2 = document.createElement("h2"); 

         img.src = "../imagens/misc/" + info.value.image; 
         h2.innerHTML = info.value.title; 
         div.appendChild(h2); 


         div.onclick = function() { 
    //always the lasy key. 
          console.log(info.key); 


         }; 

         div.appendChild(img); 
         box.appendChild(div); 

         info.continue(); 
        } 
       }; 

Ich weiß, Art der Lösung funktioniert ...

bt.onclick = (function(index) { 
     return function(){console.log('iterator: ' + index);} 
    })(i); 

with ({ n: i }) { 
bt.onclick = function(index) { 
    console.log('iterator: ' + n); 
}; 
} 

Answer 1

In dem gegebenen Beispiel, sind Sie div.onclick für jede Iteration des Cursors überschrieben wird.

Was geht vielleicht klarer, wenn Sie es geändert werden:

console.log('overwriting onclick handler to log: ' + info.key); 
div.onclick = function() { 
    console.log(info.key); 
}; 

Oder statt, nicht überschreiben:

console.log('adding onclick listener to log: ' + info.key); 
div.addEventListener('click', function() { 
    console.log(info.key); 
}); 

wird anders Diese verhalten, aber vielleicht helfen Ihnen zu verstehen, was geht weiter.