¿Cómo mostrar el texto alternativo de una imagen al hacer clic en la imagen? Creo que necesito usar jQuery.

Este es el ejemplo del código 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>

Y el texto debe mostrarse en un div separado:

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

Pero solo se debe mostrar un texto alternativo a la vez. Por lo tanto, al hacer clic en la primera imagen, se debe mostrar "Texto-1", al hacer clic en la segunda imagen, se debe reemplazar "Texto-1" por "Texto-2".

1
browntoast 13 ene. 2017 a las 17:27

5 respuestas

La mejor respuesta

Creo que esto es lo que estás buscando.

	$("#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>
4
Tim Barnett 13 ene. 2017 a las 14:31

Aquí hay solución:

Debe attach un controlador de eventos click para cada imagen y obtener su texto alt, utilizando el atributo alt. Cuando tenga el nombre alt, debe mostrar en show-text div, utilizando el método .text.

Para obtener el atributo, debe utilizar el método .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>
2
Mihai Alexandru-Ionut 13 ene. 2017 a las 14:36

¿Solución CSS?

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

Debería establecer la ubicación, etc., y no es estrictamente una respuesta a la pregunta original, pero es una alternativa.

3
allnodcoms 13 ene. 2017 a las 14:35

Aquí, cuando haces clic en una imagen. Este script jQuery hará que se haga clic en el img y obtendrá su atributo y luego lo mostrará en su 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>
2
Mihai Alexandru-Ionut 13 ene. 2017 a las 14:35

Para futuros espectadores que no estén usando jQuery, este es un ejemplo razonablemente sencillo que no usa bibliotecas ni marcos. He utilizado algunas características sintácticas del lenguaje del azúcar que se introdujeron en la Especificación del lenguaje ECMAScript 2015 por simplicidad, pero esto podría lograrse fácilmente sin usar esas características.

Atada

Este ejemplo describe un método para vincular directamente el detector de eventos a cada imagen. Esto debe usarse si las imágenes no se agregan o eliminan dinámicamente, o si necesita excluir algunas imágenes.

  1. Seleccione el elemento objetivo
  2. Seleccione las imágenes y convierta la NodeList en una matriz
  3. Defina una función de escucha que asigne el contenido del atributo alt a la propiedad textContent del objeto Nodo de destino.
  4. Itere las imágenes, asignando el oyente del evento a cada imagen.
  5. ¡Lucro!
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>

Delegada

Este ejemplo describe un método para escuchar eventos en un elemento principal común. Este método debe usarse si las imágenes se agregarán y eliminarán dinámicamente.

  1. Seleccione el elemento objetivo
  2. Seleccione el elemento principal común
  3. Defina una función de escucha que verifique si el elemento seleccionado es una imagen, luego, si lo es, asigna el contenido del atributo alt a la propiedad textContent del objeto Nodo de destino.
  4. Asigne la función de escucha al elemento padre común
  5. ¡Lucro!
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>

Caché tus objetos jQuery

Si tiene que usar jQuery, no puedo enfatizar lo suficiente la importancia de almacenar en caché sus objetos jQuery.

Cuando tienes algo como esto:

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

Está consultando al DOM un elemento que coincida con el selector #show-text cada vez que se hace clic en una imagen. Esto puede no parecer importante cuando solo tiene unos pocos elementos, pero cuando se encuentra en situaciones en las que el DOM es grande, puede llevar más y más tiempo completarlo.

Para ahorrar mucha sobrecarga, simplemente guarde en caché los objetos jQuery de esta manera:

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

(Sí, sé que cambié algunas otras cosas. No pude evitarlo)

1
user4639281user4639281 14 ene. 2017 a las 01:56