JavaScript-如何在div上显示图片ALT文本？

Question

我正在尝试在#show div上显示图像的alt文本。 我想单击图像并在#show显示其alt ，单击另一幅图像并显示其alt ，如此。 我该如何运作？

<div id="IMGS">
    <h2>1</h2>
    <div><img src="img/frog.jpg" alt="this is a frog" height="100" /><p>0</p></div>
    <div><img src="img/bird.jpg" alt="this is a bird" height="100" /><p>0</p></div>
    <div><img src="img/Photoshop-01.jpg" alt="this ain't real" height="100" /><p>0</p></div>
    <div id="show"></div>
</div>

Answer 1

您可以使用.querySelectorAll（）获取所有图像，并在其上附加点击处理程序，如下所示：

 var images = document.querySelectorAll('#IMGS img'); var elem = document.getElementById('show'); images.forEach(function(image) { image.addEventListener('click', function() { elem.innerHTML = image.getAttribute('alt'); }); }); 

 <div id="IMGS"> <h2>1</h2> <div><img src="img/frog.jpg" alt="this is a frog" height="100" class="img" /><p>0</p></div> <div><img src="img/bird.jpg" alt="this is a bird" height="100" class="img" /><p>0</p></div> <div><img src="img/Photoshop-01.jpg" alt="this ain't real" height="100" /><p>0</p></div> <div id="show"></div> </div> 

Answer 2

如果您查看控制台，您将看到您的代码抛出错误：

imgs [Symbol.iterator]不是函数

虽然NodeLists从理论上讲是可迭代的，但尚无浏览器实现这一功能。 首先将列表转换为数组，然后将其工作：

for (let img of Array.from(imgs)) {
  // ...
}

 let show = document.getElementById('show'); let imgs = document.querySelectorAll('img'); for (let img of Array.from(imgs)) { img.addEventListener('click', function() { show.innerText = img.alt }); } 

 <div id="IMGS"> <h2>1</h2> <div> <img src="img/frog.jpg" alt="this is a frog" height="100" /> <p>0</p> </div> <div> <img src="img/bird.jpg" alt="this is a bird" height="100" /> <p>0</p> </div> <div> <img src="img/Photoshop-01.jpg" alt="this ain't real" height="100" /> <p>0</p> </div> <div id="show"></div> </div> 

笔记

• 设置文本内容的标准属性是textContent 。 innerText实际上是IE。
• for...of和let是一个相对较新的结构，并非所有（尤其是较旧的）浏览器都支持。

虽然没有必要。 您可以通过事件处理程序中的this元素来访问clicked元素，从而无需使用块范围的变量。 for...of可以用.forEach代替：

 var show = document.getElementById('show');
 var imgs = document.querySelectorAll('img');
 var handler = function() { show.textContent = this.alt; };
 Array.from(imgs).forEach(function(img) { img.addEventListener('click', handler); });

或使用事件委托：

var show = document.getElementById('show');
var imgs = document.getElementById('IMGS');
imgs.addEventListener('click', function(event) {
  if (event.target.nodeName.toLowerCase() === 'img') {
     show.textContent = event.target.alt;
  }
});

Answer 3

在此代码中，为每个图像添加一个事件侦听器：

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

检查工作提琴： https : //jsfiddle.net/gerardofurtado/2bkkr6g6/3/

Answer 4

最简单的方法是通过jQuery。

这是您需要的代码：

var imgs = $("#IMGS img");
var show = $("#show");

imgs.on("click", function() {
show.html(this.alt);
})

Answer 5

为图像添加一个类（只是一个虚拟类）

<div id="IMGS">
        <h2>1</h2>
        <div><img src="img/frog.jpg" alt="this is a frog" height="100" class="img" /><p>0</p></div>
        <div><img src="img/bird.jpg" alt="this is a bird" height="100" class="img" /><p>0</p></div>
        <div><img src="img/Photoshop-01.jpg" alt="this ain't real" height="100" /><p>0</p></div>
        <div id="show"></div>
    </div>

的JavaScript

$(".img").click(function () {
      $("#show").html(  $(this).attr('alt'))  );
 })