单击图像时显示 ALT-Text

Question

单击图像时如何显示图像的替代文本？我想我需要使用jQuery。

这是 HTML 代码的示例：

<div id="images">
     <img src="/img/image.png" alt="Text-1">
     <img src="/img/image.png" alt="Text-2">
     <img src="/img/image.png" alt="Text-3">
     <img src="/img/image.png" alt="Text-4">
</div>

文本应单独显示div：

<div id="show-text"></div>

但是一次只能显示一个替代文本。因此，通过单击第一个图像“Text-1”应显示，通过单击第二个图像“Text-1”应替换为“Text-2”。

Answer 1

我想这就是你要找的。

	$("#images img").on("click", function() {
	 $("#show-text").text($(this).attr("alt"));
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images">
     <img src="/img/image.png" alt="Text-1">
     <img src="/img/image.png" alt="Text-2">
     <img src="/img/image.png" alt="Text-3">
     <img src="/img/image.png" alt="Text-4">
</div>

<div id="show-text"></div>