Question

我正在使用此代码在节目img alt中显示div。问题在于它不会在每次img更改时更新。

我可以使用其他任何addEventListener来改变屏幕上每个可见图像的alt而不需要单击吗？

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;
}

谢谢。

Answer 1

为什么不准备在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>

如果要确保在显示替代文本之前已加载图像，请对每个图像的load事件执行showText魔术：

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>

在div中显示img ALT文本

1 个答案: