Добавление тега Alt для изображений, загружаемых в массив Javascript

Question

У меня есть эти изображения в массиве, и мне интересно, как я мог бы добавить разные Alt-теги к каждому изображению.

Изображения вызываются с использованием кода HTML ниже:

<div class="output" id="output">
  <h2 class="cursor"></h2>
</div>
<div class="slideshow__image">
  <img src="https://example.com/image-1.png">
</div>

Ниже приведен Javascript

  var i = 0,
    a = 0,
    isBackspacing = false,
    isParagraph = false;
  // Typerwriter
  var textArray = [
    "This is Sparta",
    "Kings of the kings",
    "and the queens of the land",
    "Where no one lives"
  ];
  // Images
  var images = {
    0: {
      "urls": [
        "https://example.com/image-1.png"
      ]
    },
    1: {
      "urls": [
        "https://example.com/image-2.png"
      ]
    },
    2: {
      "urls": [
        "https://example.com/image-3.png"
      ]
    },
    3: {
      "urls": [
        "https://example.com/image-4.png"
      ]
    }
  }
  var speedForward = 100,
    speedWait = 1000,
    speedBetweenLines = 1000,
    speedBackspace = 25;
  typeWriter("output", textArray);

  function changeImage(number) {
    var imagesArr = [];
    images[number].urls.forEach(function(url) {
      imagesArr.push(url);
    })
    $('.slideshow__image img').fadeOut(100, function() {
      $(".slideshow__image").children().attr('src', imagesArr).fadeIn(500);
    });
  }

  function typeWriter(id, ar, callback) {
    var element = $("#" + id),
      aString = ar[a],
      eHeader = element.children("h2"),
      eParagraph = element.children("p")
    count = 0;
    if (!isBackspacing) {
      if (i < aString.length) {
        if (aString.charAt(i) == "|") {
          isParagraph = true;
          eHeader.removeClass("cursor");
          eParagraph.addClass("cursor");
          i++;
          setTimeout(function() {
            typeWriter(id, ar);
          }, speedBetweenLines);
        } else {
          if (!isParagraph) {
            eHeader.text(eHeader.text() + aString.charAt(i));
          } else {
            eParagraph.text(eParagraph.text() + aString.charAt(i));
          }
          i++;
          setTimeout(function() {
            typeWriter(id, ar);
          }, speedForward);
        }
        count++;
      } else if (i == aString.length) {

        isBackspacing = true;
        setTimeout(function() {
          typeWriter(id, ar);
        }, speedWait);
      }
    } else {
      if (eHeader.text().length > 0 || eParagraph.text().length > 0) {
        if (eParagraph.text().length > 0) {
          eParagraph.text(eParagraph.text().substring(0, eParagraph.text().length - 1));
        } else if (eHeader.text().length > 0) {
          eParagraph.removeClass("cursor");
          eHeader.addClass("cursor");
          eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
        }
        setTimeout(function() {
          typeWriter(id, ar);
        }, speedBackspace);
      } else {
        isBackspacing = false;
        i = 0;
        isParagraph = false;
        a = (a + 1) % ar.length;
        setTimeout(function() {
          typeWriter(id, ar);
        }, 50);
        changeImage(a);
      }
    }
  }

Answer 1

Вы можете изменить несколько атрибутов элемента, передав объект в функцию jQuery attr(), где каждая клавиша объекта соответствует атрибуту, который вы изменяете.

Внутри вашей функции changeImage измените эту строку:

$(".slideshow__image").children().attr('src', imagesArr).fadeIn(500);

к этому:

$(".slideshow__image").children().attr({ src: imagesArr, alt: textArray[number] }).fadeIn(500);