Вы определяете переменные цикла вне цикла. Эти переменные находятся внутри закрытия обработчика кликов. Происходит следующее:
- Вы перебираете все изображения и добавляете обработчик кликов
- Каждый обработчик кликов имеет ссылку на одни и те же переменные цикла
- Цикл завершается, все переменные цикла находятся на максимуме
- Когда происходит щелчок, обработчик щелчка получает доступ к переменным максимизированного цикла, поэтому всегда выбирается последняя запись
Чтобы этого не происходило, вы можете создавать различные функции со своими индексами:
function createaHandler(src, j, k) {
return function (src, j, k) {
modal.style.display = "block";
modalImg.src = src;
modalName.innerHTML = myName[j].innerHTML;
modalDesc.innerHTML = myDesc[k].innerHTML;
}
}
for (i = 0, j = 0, k = 0; i < img.length, j < myName.length, k < myDesc.length; i++ , j++ , k++) {
img[i].onclick = createHandler(img[i].src, j, k);
}
Более простой метод - определить соответствующие переменные в каждом новом цикле, чтобы они сбрасывались и содержали правильные значения:
for (i = 0; i < img.length; i++) {
let src = img[i].src;
let nameHTML = myName[i].innerHTML;
let descHTML = myDesc[i].innerHTML;
img[i].onclick = function () {
modal.style.display = "block";
modalImg.src = src;
modalName.innerHTML = nameHTML;
modalDesc.innerHTML = descHTML;
}
}