如何用JavaScript创建数组图片画廊？循环重复显示问题求助

你的问题出在for循环里没有读取数组中存储的图片地址，而是一直使用当前的img.src，所以不管数组里有多少张图，都会重复显示同一张。

错误原因分析 #

这段循环代码里，你每次输出的都是同一个img.src的值：

for(i = 0; i < data.length; i++) {
  document.write(`<img src="${img.src}" class="xxx"/>`);
}

而数组data里每个元素都存储了对应的图片地址，你需要遍历数组，取出每个元素的img属性值。

修正后的代码 #

把循环里的img.src替换成data[i].img，就能正确遍历显示所有存储的图片：

let newData = {
    img: img.src
  },
  data = sessionStorage.getItem("data") ? JSON.parse(sessionStorage.getItem("data")) : [];

// 更新数据
data = [...data, newData];

// 保存到sessionStorage
sessionStorage.setItem("data", JSON.stringify(data));

// 遍历数组显示图片
for(let i = 0; i < data.length; i++) {
  // 这里改用data[i].img获取数组中对应项的图片地址
  document.write(`<img src="${data[i].img}" class="xxx"/>`);
}

额外优化建议 #

尽量避免使用document.write，可以通过DOM操作来添加图片元素，比如：

// 假设页面上有一个id为gallery的容器
const gallery = document.getElementById('gallery');
for(let i = 0; i < data.length; i++) {
  const imgElement = document.createElement('img');
  imgElement.src = data[i].img;
  imgElement.className = 'xxx';
  gallery.appendChild(imgElement);
}

内容的提问来源于stack exchange，提问作者training_1986