Question

我正在尝试在alt div上显示#show图片文字。我想点击图片并在alt中显示#show，点击另一张图片并显示其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)) {
  // ...
}

＆＃13;

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

＆＃13;

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

＆＃13;

备注

设置文字内容的标准属性为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 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'))  );
 })

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

5 个答案: