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>

Answer 2

只需遍历子级并创建一个数组，或者坦率地做任何您想做的事情。

var elements = document.querySelector('.imgslide').children;

let altArray = [];
for(let i = 0; i < elements.length; i++) {
    if(elements[i].src !== undefined) {
        altArray.push(elements[i].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>

Answer 3

您可以通过首先查询文档中的所有.slides，然后映射每个幻灯片元素的alt属性来获取幻灯片的所有alt标签来实现此目的。

在下面的代码段中，使用Array.from将document.querySelectorAll(".slides")的结果转换为Array类型-这使我们可以使用Array#map方法来映射每个{ {1}}个元素slide归入一个临时数组。

最后一步alt创建一个逗号，该逗号与前一个.join()产生的字符串数组分开：

.map()

var innerText = 
// Select all slides and construct array from NodeList
Array.from(document.querySelectorAll(".slides")) 
// Map each alt attribute to temporary array
.map(image => image.getAttribute("alt")) 
// Construct a comma separated of each alt text
.join() 

document.querySelector(".img-name").innerText = innerText;

Answer 4

作为一个很酷的孩子，我会这样@tomas

const imgs = document.querySelectorAll('img')

imgs.map(img => {
   // enter code here
   console.log(img.getAttribute('alt'))
})

Answer 5

一个快速而优雅的解决方案是：

imgnames.textContent = [...document.querySelectorAll('.slides')].map(i=>i.alt).join(' ');

#imgnames {
  border: 3px dotted #ddd;
}

<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" id="imgnames"></div>

imgnames是id中的div，用于输出图像名称。由于它具有id，因此可以自动用作全局变量。
要设置该div的文本，请将其分配给该元素的textContent属性。
document.querySelectorAll('.slides')为您提供NodeList，其中包含所有图像元素的引用。
[...document.querySelectorAll('.slides')]从NodeList ...
...然后，您可以使用Array.prototype.map()从中创建另一个数组，该数组仅包含每个图像的alt属性的内容。
最后，使用Array.prototype.join(' ')连接该数组，使其成为字符串，从而可分配给imgnames.textContent。

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

5 个答案: