单击图像时显示ALT文本

Question

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

This is the example of the HTML-Code:

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

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

Answer 2

CSS Solution?

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.

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

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

For getting attribute you have to use .attr method.

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

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

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. Select the images and convert the NodeList to an array
3. Define a listener function which assigns the content of the alt attribute to the textContent property of the target Node object.
4. Iterate the images, assigning the event listener to each image.
5. Profit!

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. Select the common parent element
3. 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.
4. Assign the listener function to the common parent element
5. Profit!

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.

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.

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

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)