Показать текст img ALT внутри div - PullRequest
Новая
       5

Показать текст img ALT внутри div

0 голосов
/ 23 сентября 2018

Я использую этот код, чтобы показать img alt внутри шоу div.Проблема в том, что он не обновляется при каждом img изменении.

Есть ли какие-либо другие addEventListener, которые я могу использовать, чтобы они меняли альт при каждом видимом изображении на экране и без необходимости нажимать? 

var myImage = document.getElementsByTagName("img");
var text = document.getElementById("show");

for (var i = 0; i < myImage.length; i++) {
    myImage[i].addEventListener('click',show);
}

function show(){
    var myAlt = this.alt;
    text.innerHTML = myAlt;
}

Заранее спасибо.

1 Ответ

0 голосов
/ 23 сентября 2018

Почему бы просто не перебрать изображения, как только HTML будет готов?Просто подключите одного слушателя к событию DOMContentLoaded: 

document.addEventListener('DOMContentLoaded', () => {
  let images = [...document.querySelectorAll('img[alt]')]

  for (const image of images) {
    const altDiv = document.createElement('div')
    altDiv.textContent = image.getAttribute('alt')
    image.parentNode.appendChild(altDiv)
  }
})
<div>
  <img src="http://lorempixel.com/200/200/" alt="my beautiful alt text" />
</div>

<div>
  <img src="http://lorempixel.com/200/100/" alt="my beautiful alt text 2" />
</div>

Если вы хотите убедиться, что изображения загружаются перед отображением альтернативного текста, выполните магию showText для события load каждого изображения: 

document.addEventListener('DOMContentLoaded', () => {

  let images = [...document.querySelectorAll('img[alt]')]

  for (const image of images) {
    image.addEventListener('load', (e) => {
      const altDiv = document.createElement('div')
      altDiv.textContent = image.getAttribute('alt')
      image.parentNode.appendChild(altDiv)
    })
  }

})
<div>
  <img src="http://lorempixel.com/200/200/" alt="my beautiful alt text" />
</div>

<div>
  <img src="http://lorempixel.com/100/200/" alt="my beautiful alt text 2" />
</div>

<div>
  <img src="http://lorempixel.com/200/100/" alt="my beautiful alt text 3" />
</div>
...