javascript - 如何从多个图像访问多个 alt 属性值？

Question

我需要从多个图像中检索 alt 属性值并将它们打印在图像下方。我只能通过以下尝试获得其中之一。

JavaScript:

let imgName = document.getElementById(project)
.getElementsByTagName("img")[0].alt

document.getElementById(project)
.getElementsByClassName("img-name")[0].innerText = imgName;

HTML:

<div class="pagination"></div>

<div class="imgslide noselect">
    <div class="prev" onclick="plusDivs('project1', -1)"></div>
    <div class="next" onclick="plusDivs('project1', 1)"></div>
    <img class="slides" alt="image1"src="img/project-1/Scan-4.jpg">
    <img class="slides" alt="image2"src="img/project-1/Scan-8.jpg">
    <img class="slides" alt="image3"src="img/project-1/Scan-24.jpg">
    <img class="slides" alt="image4"src="img/project-1/Scan-35.jpg">
    <img class="slides" alt="image5"src="img/project-1/Scan-39.jpg">
    <img class="slides" alt="image6"src="img/project-1/Scan-40.jpg">
</div>
<div class="img-name"></div>

Answer 1

只需创建一个包含所有图像元素的数组并将 alt 属性映射到数组中，如下所示:

 

const altArray = Array.from(document.getElementsByTagName("slides")).map(e => e.alt);
console.log(altArray);

 

<div class="imgslide noselect">
            <div class="prev" onclick="plusDivs('project1', -1)"></div>
            <div class="next" onclick="plusDivs('project1', 1)"></div>
            <img class="slides" alt="image1"src="img/project-1/Scan-4.jpg">
            <img class="slides" alt="image2"src="img/project-1/Scan-8.jpg">
            <img class="slides" alt="image3"src="img/project-1/Scan-24.jpg">
            <img class="slides" alt="image4"src="img/project-1/Scan-35.jpg">
            <img class="slides" alt="image5"src="img/project-1/Scan-39.jpg">
            <img class="slides" alt="image6"src="img/project-1/Scan-40.jpg">
        </div>
        <div class="img-name"></div>