Как я могу получить доступ к нескольким значениям атрибута 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>

Answer 2

Быстрое и элегантное решение будет следующим:

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>

1. imgnames - это id из div для вывода имен изображений. Поскольку он имеет id, он автоматически доступен как глобальная переменная.

2. Чтобы установить текст этого div, присвойте его свойству textContent этого элемента.

3. document.querySelectorAll('.slides') возвращает NodeList, содержащую ссылку на все элементы изображения.

4. [...document.querySelectorAll('.slides')] создает массив из этого NodeList ...

5. ... который затем позволяет использовать Array.prototype.map() для создания из него другого массива, который содержит только содержимое атрибута alt каждого изображения.

6. Наконец, присоедините этот массив, используя Array.prototype.join(' '), чтобы он стал строкой и, таким образом, присваивался imgnames.textContent.

Answer 3

Этого можно достичь, сначала запросив все .slides в документе, а затем сопоставив атрибут alt каждого элемента слайда, чтобы получить все alt-теги слайдов.

В приведенном ниже фрагменте Array.from используется для преобразования результата document.querySelectorAll(".slides") в тип Array - это позволяет нам использовать метод Array#map для сопоставления каждого атрибута slide elements 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;

<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 4

Как крутой парень, я бы поступил так @ tomas

const imgs = document.querySelectorAll('img')

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

Answer 5

Просто переберите детей и создайте массив или откровенно сделайте все, что вы хотите.

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>