Как отобразить массив изображений в виде списка и сделать их кликабельными для отображения текста с использованием 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

Теперь отображается только одно изображение.

Поскольку вы используете один <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 {
    ...
}