Jquery $ .Each Schleife mit Array

Question

Ich arbeite mit einem Array von URLs in einem Objekt in Jquery und ich bin an dem Punkt, wo ich kurz vor der Fertigstellung bin, aber ich habe ein kleines Problem .

Ich habe die folgende Schleife an eine Klick-Funktion gebunden, wenn der Benutzer auf ein Foto klickt (an [Ort]) sollte eine Reihe von entsprechenden Fotos laden, diese Fotos sind in einem Array gespeichert und ich kann erfolgreich zugreifen das Array innerhalb der korrekten Objekte, aber anstatt die URLs der Reihe nach einzufügen, fügt es JEDE URL in jedes Foto ein, getrennt durch Kommas.

dh statt: img src="[0]", img src="[1]", img src="[2]" ...

Ich stellte mich mit: img src="[0],[1],[2]" ...

$.each(albums[location].photos, function(index, val){ 
    $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail" style="display:inline-block; padding: 0 25px;"><img src='+albums[location].photos+' id="coverPhoto" height="320" width="320"><figcaption>'+location+'</figcaption></a></div>'); 
}); 

Ich denke, ich es mit einer anderen Schleife lösen könnte, aber das scheint klobig wegen der Verwendung von $ .Each.

Jede Hilfe wäre sehr dankbar

Answer 1

Sie die Parameter der $ .each

Sie 2 Möglichkeiten haben zu verwenden, verwenden Sie den Index oder den Wert

$.each(albums[location].photos, function(index, val){ $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail" 
style="display:inline-block; padding: 0 25px;"><img 
src='+albums[location].photos[index]+' id="coverPhoto" height="320" 
width="320"><figcaption>'+location+'</figcaption></a></div>'); }); 

oder

$.each(albums[location].photos, function(index, val){ $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail" 
style="display:inline-block; padding: 0 25px;"><img 
src='+val+' id="coverPhoto" height="320" 
width="320"><figcaption>'+location+'</figcaption></a></div>'); }); 

Answer 2

Ich glaube, Sie würden <img src='+albums[location].photos+'... mit <img src='+val+'...

ersetzen möchte ich noch hinzufügen, dass es aussieht wie Sie IDs in Ihre wiederholten Elemente wiederverwenden, die fast sicher ist Erstellen Sie Probleme auf der Straße, zum Beispiel, wenn Sie Ihr Bild zweimal auf der gleichen Seite ersetzen wollten. Es verstößt auch gegen die HTML-Spezifikation.

Answer 3

Prepend Hauptbehälter einmal und Schließen Sie es, wenn Sie im Begriff sind, die Schleife zu beenden, hier ist klarer Code

$.each(albums[location].photos, function(index, val){ 
    if (index == 0) { 
     $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail" style="display:inline-block; padding: 0 25px;">'); 
    } 

    $('#'+cover_id+'').append('<img src='+albums[location].photos[index]+' id="coverPhoto" height="320" width="320">'); 

    if (albums[location].photos.length >= (index - 1)) {   
     $('#'+cover_id+'').append('<figcaption>'+location+'</figcaption></a></div>'); 
    } 
}); 

Answer 4

Problem: Sie ordnen das gesamte Array selbst als Quelle und nicht als eine bestimmte an einem Index. <img src='+albums[location].photos+'

Lösung: Verwenden Sie die val Variable von der Callback-Funktion zurückgegeben. Diese val zeigt auf ein bestimmtes Element in einem Index und wird so erhöht, dass es bei jeder Iteration auf das nächste Element zeigt.

<img src='+val+'