[英]How can I access multiple alt attribute values from several images?
I need to retrieve alt attribute value from multiple images and print them below image.我需要从多个图像中检索 alt 属性值并将它们打印在图像下方。 I can only get one of them with the below attempt.
通过以下尝试,我只能获得其中之一。
JavaScript: JavaScript:
let imgName = document.getElementById(project)
.getElementsByTagName("img")[0].alt
document.getElementById(project)
.getElementsByClassName("img-name")[0].innerText = imgName;
HTML: 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>
Just create an array of all image elements and map the alt
attributes into the array like so:只需创建一个包含所有图像元素的数组并将
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>
Just loop through the children and create an array or frankly do whatever you want.只需遍历孩子并创建一个数组或坦率地做任何你想做的事情。
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>
You could achieve this by first querying all .slides
in your document and then mapping each slide element's alt
attribute to aquire all alt tags of your slides.您可以通过首先查询文档中的所有
.slides
然后映射每个幻灯片元素的alt
属性来获取幻灯片的所有 alt 标签来实现这一点。
In the snippet below, Array.from
is used to transform the result of document.querySelectorAll(".slides")
into an Array
type - this allows us to use the Array#map
method to map each slide
elements alt
attribute into a temporary array.在下面的代码片段中,
Array.from
用于将document.querySelectorAll(".slides")
转换为Array
类型 - 这允许我们使用Array#map
方法将每个slide
元素的alt
属性映射到一个临时数组.
The final step .join()
creates a comma separated from the string array that results from the prior .map()
:最后一步
.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;
<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>
As a cool kid would do I'd do this manner @tomas作为一个很酷的孩子,我会这样做@tomas
const imgs = document.querySelectorAll('img')
imgs.map(img => {
// enter code here
console.log(img.getAttribute('alt'))
})
A quick and elegant solution would be this:一个快速而优雅的解决方案是这样的:
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
is the id
of the div
for outputting the image names. imgnames
是用于输出图像名称的div
的id
。 Since it has an id
it is automatically available as a global variable.由于它有一个
id
它可以自动作为全局变量使用。
To set the text of that div, assign it to the textContent
property of that element.要设置该 div 的文本,请将其分配给该
textContent
属性。
document.querySelectorAll('.slides')
gets you a NodeList
containing reference of all the image elements. document.querySelectorAll('.slides')
您提供一个包含所有图像元素引用的NodeList
。
[...document.querySelectorAll('.slides')]
creates an array from that NodeList
... [...document.querySelectorAll('.slides')]
从该NodeList
创建一个数组 ...
... which then allows you to use Array.prototype.map()
to create another array from it which contains only the contents of each image's alt
attribute. ...然后允许您使用
Array.prototype.map()
从中创建另一个数组,该数组仅包含每个图像的alt
属性的内容。
Finally, join that array using Array.prototype.join(' ')
so it becomes a String and thus, assignable to imgnames.textContent
.最后,使用
Array.prototype.join(' ')
加入该数组,使其成为一个字符串,从而可以分配给imgnames.textContent
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.