Hinzufügen von Bildern aus Array mit Javascript

Question

Ich versuche, ein Array von Zeichenfolgen zu einem Div hinzuzufügen und während es mit innerHTML einfach genug schien, scheint nichts zu funktionieren.

Ich habe eine Textdatei mit URLs, und ich habe sie so verändert, dass sie in der richtigen HTML-Format (in Format) sein werden

Die Textdatei im Format kommt, nur mit etwa zweihundert Urls:

http://content.com/imagegallery/17/_12411977.jpg 
    http://content.com/imagegallery/16/_10622896.jpg 
    http://content..com/imagegallery/5/_7248625.jpg 
    http://content.com/imagegallery/13/_12304673.jpg 
    http://content.com/imagegallery/4/_12590644.jpg 
    http://content.com/imagegallery/0/_9864460.jpg 
    http://content.com/imagegallery/7/_12589367.jpg 
    http://content.com/imagegallery/7/_12812747.jpg 

Der js Code:

  $.get("file.txt", function(data) { 
       var array = data.split('\n'); 
       //Remove duplicate images from array 
       $.each(array, function(i, el){ 
        if($.inArray(el, cleanedArray) === -1) cleanedArray.push(el); 
       }); 
       //Remove any empty element from array 
       cleanedArray = cleanedArray.filter(function(n){ return n!= ""}); 
       //turn every element into img tags 
       for (i=0; i<cleanedArray.length; i++) { 
        cleanedArray[i] ="\n" + "<img src='" + temp + "'/>"; 
       }     
       var slideshow = document.getElementById("slideShowImages").innerHTML; 

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

aber während es die img-Tags in die Diashow divs innerHTML- bekomme hinzugefügt, es funktioniert immer noch nicht richtig. Wenn Sie es über console.log anzeigen, wird dies wie folgt angezeigt: Das erste ist das voreingestellte, fest codierte Bild, das angezeigt wird, während das andere ein Beispiel dafür ist, wie der Rest mit dem Code hinzugefügt wird.

<img src="assets/img/default.jpg" style="opacity: 1; position: absolute; top: 0px; left: 0px;"> 
<img src='http://content/imagegallery/17/_12411977.jpg'/> 

Ich habe versucht, zu ändern, wie der innerHTML- aufgerufen und versuchte, indem die Inline-Stile, aber nichts scheint zu dem Bilder-Display zu machen. Jede Hilfe wäre willkommen.

Answer 1

Wenn dies Ihr vollständiger Code ist, sieht es so aus, als ob Sie die innerHTML der Diashow greifen, die eine Zeichenfolge zurückgibt und dann diese Zeichenfolge aktualisiert, aber nie die innerHTML der Diashow durch Ihre neue Zeichenfolge ersetzt.

Versuche des Hinzufügen dieses nach der zweiten for Schleife:

//Set the inner HTML of the slideshow 
document.getElementById("slideShowImages").innerHTML = slideshow; 

Alternativ können Sie das gleiche mit jQuery tun, die es, wie Sie Sie zur Verfügung haben sieht (wenn ich die $.get() rechts gelesen):

Während viele Dinge in JavaScript Verweise und Zeiger sind, gibt das Abrufen des String-Wertes von innerHTML die Zeichenfolge, nicht einen Verweis auf die Eigenschaft, soweit ich in einem schnellen Test an meinem Ende sagen kann, so dass Sie benötigen manuell injizieren Ihre neue Zeichenfolge in die Eigenschaft.

Hoffe, das hilft!