单击图像时显示ALT-Text

How to show the alt-text of an image when clicking on the image? I think I need to use jQuery.

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

This is the example of the HTML-Code:

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

And the text should be shown in a separate div:

文本应显示在单独的div中：

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

But only one alt-text should be shown at once. So by clicking on the first Image "Text-1" should be shown, by clicking on the second image the "Text-1" should be replaced by "Text-2".

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

5 个解决方案

#1

I think this is what you're looking for.

我想这就是你要找的东西。

	$("#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>

#2

CSS Solution?

CSS解决方案？

img:focus::before {
    content: attr(alt);
}

You'd need to set the placement and so on, and it's not strictly an answer to the original question - but it's an alternative.

你需要设置位置等等，这不是原始问题的严格答案 - 但它是另一种选择。

#3

Here, when you click on an image. This jQuery script will get the img clicked and get its attribute and then show it in your div.

在这里，当您单击图像时。这个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>

#4

Here is solution:

这是解决方案：

You need to attach a click event handler for every image and get it's alt text, using alt attribute. When you have alt name, you should display in show-text div, using .text method.

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

For getting attribute you have to use .attr method.

要获取属性，您必须使用.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>

#5

For future viewers who may not be using jQuery this is a reasonably straightforward example which does not use any libraries or frameworks. I've used some syntactic sugar language features that were introduced in the ECMAScript 2015 Language Specification for simplicity, but this could be easily achieved without using those features.

对于可能不使用jQuery的未来观众来说，这是一个相当简单的例子，它不使用任何库或框架。为了简单起见，我使用了ECMAScript 2015语言规范中引入的一些语法糖语言功能，但这可以在不使用这些功能的情况下轻松实现。

Bound

This example describes a method of directly binding the event listener to each image. This should be used if images are not added or removed dynamically, or if you need to exclude some images.

此示例描述了将事件侦听器直接绑定到每个映像的方法。如果未动态添加或删除图像，或者您需要排除某些图像，则应使用此选项。

1. Select the target element
2. 选择目标元素
3. Select the images and convert the NodeList to an array
4. 选择图像并将NodeList转换为数组
5. Define a listener function which assigns the content of the alt attribute to the textContent property of the target Node object.
6. 定义一个侦听器函数，该函数将alt属性的内容分配给目标Node对象的textContent属性。
7. Iterate the images, assigning the event listener to each image.
8. 迭代图像，为每个图像分配事件监听器。
9. Profit!
10. 利润！

const target = document.getElementById('show-text');
const images = [...document.querySelectorAll('#images img')];
const listener = event => target.textContent = event.target.alt;
images.forEach(element => element.addEventListener('click', listener, false));

const target = document.getElementById('show-text');
const images = [...document.querySelectorAll('#images img')];
const listener = event => target.textContent = event.target.alt;
images.forEach(element => element.addEventListener('click', listener, false));

img { cursor: pointer }

<div id="images">
     <img src="http://placehold.it/100x100?text=1" alt="Text-1">
     <img src="http://placehold.it/100x100?text=2" alt="Text-2">
     <img src="http://placehold.it/100x100?text=3" alt="Text-3">
     <img src="http://placehold.it/100x100?text=4" alt="Text-4">
</div>

And the text should be shown in a separate div:

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

---

Delegated

This example describes a method of listening to events on a common parent element. This method should be used if images will be dynamically added and removed.

此示例描述了在公共父元素上侦听事件的方法。如果动态添加和删除图像，则应使用此方法。

1. Select the target element
2. 选择目标元素
3. Select the common parent element
4. 选择公共父元素
5. Define a listener function which checks to see if the clicked element is an image, then—if it is—assigns the content of the alt attribute to the textContent property of the target Node object.
6. 定义一个侦听器函数，该函数检查所单击的元素是否为图像，然后 - 如果是 - 将alt属性的内容分配给目标Node对象的textContent属性。
7. Assign the listener function to the common parent element
8. 将侦听器函数分配给公共父元素
9. Profit!
10. 利润！

const target = document.getElementById('show-text');
const images = document.getElementById('images');
const listener = event =>
  event.target.tagName === 'IMG' && (target.textContent = event.target.alt);
images.addEventListener('click', listener, true);

const target = document.getElementById('show-text');
const images = document.getElementById('images');
const listener = event =>
  event.target.tagName === 'IMG' && (target.textContent = event.target.alt);
images.addEventListener('click', listener, true);

img { cursor: pointer }

<div id="images">
     <img src="http://placehold.it/100x100?text=1" alt="Text-1">
     <img src="http://placehold.it/100x100?text=2" alt="Text-2">
     <img src="http://placehold.it/100x100?text=3" alt="Text-3">
     <img src="http://placehold.it/100x100?text=4" alt="Text-4">
</div>

And the text should be shown in a separate div:

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

---

Cache Your jQuery Objects

If you do have to use jQuery, I cannot emphasize enough the importance of caching your jQuery objects.

如果你必须使用jQuery，我不能强调缓存jQuery对象的重要性。

When you have something like this:

当你有这样的事情：

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

You are querying the DOM for an element matching the #show-text selector every time an image is clicked. This may not seem important when you have only a few items, but when you get into situations where the DOM is large, this can take more and more time to complete.

每次单击图像时，您都在查询DOM以查找与#show-text选择器匹配的元素。当你只有几个项目时，这似乎并不重要，但是当你遇到DOM很大的情况时，这可能需要花费越来越多的时间来完成。

To save a lot of overhead, simply cache the jQuery objects like so:

为了节省大量开销，只需缓存jQuery对象，如下所示：

const target = $('#show-text');
const images = $('#images img');
images.on('click', event => target.text(event.target.alt));

(Yeah, I know I changed some other things. I couldn't help myself)

（是的，我知道我改变了一些其他的东西。我无法帮助自己）