如何使用JavaScript在图像标记上设置src和alt属性

Question

JavaScript是我一点一点在学习的东西，所以请原谅我的无知。。。！

我在图库中有一个图像列表，我正在创建一个点击事件的模态。我已经设法将图像的所有来源收集到一个数组中，然后使用forEach方法将li和img标记附加到父ul中，所有来源都进入src属性。

我的问题是，我还有一个alt属性数组，我还需要将其设置到相同的图像列表中。

我不认为我可以在一个forEach循环中同时执行这两个属性，而且为alt属性执行第二个循环似乎太麻烦了。一定有一个更简单的方法，这超出了我目前的理解。

下面是我已经拥有的代码，我想知道我是否应该关注JSON对象而不是这种方法？

$('.gallery-image img').click(function(){
$('.modal').addClass('show');
var images = document.getElementsByClassName('aurora-gallery-image');
var imageSources = [];
var imageTitles = [];
for (var i = 0; i < images.length; i++) {
imageSources.push(images[i].src);
imageTitles.push(images[i].alt);
}
imageSources.forEach(imageFunction);

function imageFunction(item){
$('.image-modal ul').append('<li class="image-modal-item"><img class="modal-content" alt="" src="' + item + '" /><p id="aurora-gallery-image-title">  </p></li>');
}


}); 

Answer 1

forEach()将数组索引作为第二个参数传递给回调函数。您可以使用它从imageTitles阵列中获取相应的元素

function imageFunction(item, index){
$('.image-modal ul').append(`<li class="image-modal-item"><img class="modal-content" alt="${imageTitles[i]}" src="${item}" /><p id="aurora-gallery-image-title">  </p></li>`);
}

但是您根本不需要数组。只需在for循环中执行即可：

for (let i = 0; i < images.length; i++) {
$('.image-modal ul').append(`<li class="image-modal-item"><img class="modal-content" alt="${images[i].alt}" src="${images[i].src}" /><p id="aurora-gallery-image-title">  </p></li>`);
}