JavaScript

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

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

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

Answer 2

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

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

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

Answer 3

您可以使用 .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 4

如果您查看控制台，您会发现您的代码抛出错误：

imgs[Symbol.iterator] is not a function

虽然理论上 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 访问被单击的元素，这样就不需要块范围的变量。 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 5

最简单的方法是通过 jQuery。

这是您需要的代码：

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

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

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

JavaScript - How to show image ALT text on a div?

html

alt