单击图像时显示ALT-文本

Question

如何在单击图像时显示图像的alt文本？我想我需要使用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>

但一次只能显示一个alt文本。因此，通过点击第一个图像“文本-1”应该显示，通过点击第二个图像，“文本-1”应该替换为“文本-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>

​

Answer 2

在这里，当你点击一个图像。这个jQuery脚本将点击img并获取其属性，然后在div中显示它。

​

$('#images img').on('click', function(){
  $('#show-text').html($(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>

​

Answer 3

以下是解决办法：

您需要为每个图像设置一个attach事件处理程序，并使用alt属性获取它的alt文本。当您有alt名称时，您应该使用.text方法在show-text div中显示。

要获取属性，必须使用.attr方法。

​

$('#images img').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>

​