Loop zeigt nur letzte Instanz von Array an

Question

Ich versuche, HTML-Inhalt zu erzeugen, indem ich ein Array durchlaufen und Daten in meine HTML-Zeichenfolge eingeben.

Ich habe versucht, die folgende Antwort von Stack-Überlauf mit (ohne Glück): JavaScript closure inside loops – simple practical example

Andere Antwort der ich ausgesehen haben bei zu komplex sind, für das, was ich tun möchte.

Hier ist meine Original-Code:

var staticOptions = [ 
    { 
    name : "option1", 
    id : "option1", 
    img : "img/extras/360-chasis.jpg" 
    }, 
    { 
    name : "option2", 
    id : "option2", 
    img : "img/extras/lifing-eye.jpg" 
    }, 
    { 
    name : "option3", 
    id : "option3", 
    img : "img/extras/360-window.jpg" 
    }, 
    { 
    name : "option4", 
    id : "option4", 
    img : "img/extras/led-flood-light.jpg" 
    }, 
    { 
    name : "option5", 
    id : "option5", 
    img : "img/extras/360-canteen-light.jpg" 
    } 
]; 

for (var i = 0; i < staticOptions.length; i++) { 
    var optionHtml = '<div class="form-check width30">' 
       + '<label class="form-check-label" for="' 
       + staticOptions[i].id 
       + '">' 
       + '<input class="form-check-input" id="' 
       + staticOptions[i].id 
       + '" type="checkbox">' 
       + staticOptions[i].name 
       + '<!--  <span class="indiv-price">£300</span>-->' 
       + '</label>' 
       + ' </div>' 
       + '<div class="info-img hide"><img src="' 
       + staticOptions[i].img 
       + '"></div>'; 

    $("#bodyOptions").html(optionHtml); 

}; 

Dieser Code, wie es steht nur gibt das letzte Element meiner Array. Wenn ich jedoch die alert-Methode verwende, um den HTML-Code auszugeben, durchläuft er wie erwartet alle fünf Objekte in meinem Array.

die obere Stimme Antwort auf die Frage oben Lese erwähnt „Verschlüsse“ Ich habe versucht, dass die Antwort auf meinen Code anzupassen, aber es nichts ausgibt (keine Fehler, die entweder):

function createfunc(i) { 
    return function() { 

     var optionHtml = '<div class="form-check width30">' 
       + '<label class="form-check-label" for="' 
       + [i].id 
       + '">' 
       + '<input class="form-check-input" id="' 
       + [i].id 
       + '" type="checkbox">' 
       + [i].name 
       + '<!--  <span class="indiv-price">£300</span>-->' 
       + '</label>' 
       + ' </div>' 
       + '<div class="info-img hide"><img src="' 
       + [i].img 
       + '"></div>'; 

    $("#bodyOptions").html(optionHtml); 

    }; 
} 

for (var i = 0; i < staticOptions.length; i++) { 
    staticOptions[i] = createfunc(i); 
} 

Zusammengefasst alles, was ich Ich möchte fünf Teile HTML-Code erstellen, die die Daten für jede Instanz aus dem Array eingibt und sie in HTML auf die Seite schreibt.

Vielen Dank im Voraus.

Answer 1

Versuchen:

$("#bodyOptions").html($("#bodyOptions").html() + optionHtml); 

Scheint, wie Sie ganz ersetzen #bodyOptions html mit der neuen Option, also, was Sie tun brauchen, um hinzuzufügen, was es bereits enthält.