我需要显示数组中的图像列表,并使其可单击以在单击时显示一些文本。寻找一些仅使用 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/
现在只显示一张图像。
最佳答案
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 {
...
}
关于javascript - 如何使用 javascript 将图像数组显示为列表并使其可单击以显示一些文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56623598/