在javascript中打印圖像數組的問題

Question

我正在使用圖像數組做一個簡單的畫廊：

var gallery_pictures = [
    { name:'01.jpg', alt:'01'},
    { name:'02.jpg', alt:'01'},
    { name:'03.jpg', alt:'01'},
    { name:'04.jpg', alt:'01'},
    { name:'05.jpg', alt:'01'}
];

在此容器內：

<div style="width:1000px; margin: 0 auto;" id="gallery">

</div>

並使用通過映射將文本存儲在變量中的函數：

var gallery = gallery_pictures.map(function gallery(foto, index, array) {
    pictures = '<div style="width:190px;margin-right: 10px; float:left;"><img width="200" src="'+foto.name+'" alt="'+foto.alt+'" "></div>'
    return pictures;
});

然后我使用innerHTML在div中將其打印出來：

imageGallery.innerHTML=gallery;

我遇到的問題是，每張圖片之間都以某種方式出現了昏迷“”。 這段代碼生成chrome：

以及它在屏幕上的外觀：

Answer 1

您想要的是每個循環或一個普通的for循環。

您已將數組打印為html。 這就是它們看起來像數組元素的原因。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

map（）方法創建一個新數組，並在調用數組中的每個元素上調用提供的函數。

您將返回一個包含內部元素的數組。 這就是您看到逗號的原因。

Answer 2

您需要以沒有逗號的方式連接數組。

var gallery = "";
gallery_pictures.forEach(function(foto){
    var pictures = '<div style="width:190px;margin-right: 10px; float:left;"><img width="200" src="'+foto.name+'" alt="'+foto.alt+'" "></div>';
    gallery += pictures;
});
imageGallery.innerHTML = gallery;