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

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

Now only one image is displayed.

因为你正在使用一个<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 {
    ...
}