Question

我需要显示数组中的图像列表，还需要使其可单击以在单击时显示一些文本。寻找仅使用javascript的简单解决方案。

var images = ["img1", "img2", "img3"];

var allPics = images.length;
var i = 0;

for(;i<allPics; i++){
myImg.src = images[i];
}

此处的示例： https://jsfiddle.net/gmqLtd1u/1/

现在仅显示一张图像。

Answer 1

现在仅显示一张图像。

因为您正在使用一个<img>并循环更新其src数次。在最后一次迭代之后，其src不再更新。这就是为什么您看到最后一张图片。

更改您的html，以使<img>代替<div>作为容器/占位符：

<!-- <img id="myImg"/> -->

<div id="myImg"></div>

并更改您的JS，以创建<img>并将其附加到<div>：

for(;i<allPics; i++){
    // myImg.src = images[i];

    // TODO: adjust this to whatever you want
    // in this example, use `<a>` that link to another page
    // you can use javascript to show modal/alert too
    var a = document.createElement('a');
    a.href = 'example.html'; // TODO: adjust this

    var img = document.createElement('img');
    img.src = images[i];
    a.appendChild(img);

    document.getElementById('myImg').appendChild(a);
}

也许还有您的CSS，以与新输出匹配：

#myImg img {
    ...
}

如何使用列表显示图像数组并使其可单击以使用javascript显示一些文本？

1 个答案: