javascript - 在 javascript 中打印图像数组时出现问题

标签 javascript html arrays iteration gallery

我正在使用一组图像制作一个简单的画廊:

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 中的代码结果:

like in the screenshoot

它在屏幕上的样子是这样的: enter image description here

最佳答案

您需要以其中不包含逗号的方式连接数组。

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;

关于javascript - 在 javascript 中打印图像数组时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45730055/

相关文章:

ios - 使用 TableView 第一个单元格作为标题和问题

Python:将向量插入矩阵

java - 在数组中添加并求平均值

javascript - 如何将 DOM 对象绑定(bind)到 JS 对象

javascript - 如何在express js中将数组值发送到html页面

javascript - 显示和隐藏内容的 jQuery 函数

javascript - 无法根据选择按预期隐藏数据

javascript - knockout : dependency of two observables bidirectional

javascript - 使用调用者组件的相同属性

javascript - 登录表单不与 MySQL 交互