时间戳

首页 > 解决方案 > 如何将一组图像显示为列表并使其可点击以使用 javascript 显示一些文本？

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

问题描述

我需要显示数组中的图像列表，并使其可点击以在点击时显示一些文本。仅使用 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/

现在只显示一张图像。

标签： javascripthtmlarraysimagefor-loop

解决方案

现在只显示一张图像。

因为您正在使用一个并在循环中多次<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 {
    ...
}

推荐阅读