0

Buenas os planteo el siguiente problema aunque no tenga el código ahora mismo pero es algo que llevo un par de días estancado.

Tengo un archivo php que recoge todos los post de un wordprees con un while have_post(). Por cada post carga una imagen en miniatura de dicho post, es etiqueta tiene un atributo que va variando en cada post. Lo llamaremos variable.com. La etiqueta tiene un onclick="funcion()"

<img class="test" src="imagen.png" attr-src="variable.com" onclick="funcion()">

Ahora mediante un Javascript tengo hecha la funcion, esta.

function funcion(){
   var x = document.getElementByClassName('test');
   var y= x[].getAttribute('attr-src');
}

Como veréis en Y hay un x[], pero no se que poner hay para que me recoja la posición actual ya que si pongo x[0] me devuelve el attr-src del primer post y necesito que me devuelva el attr-src del que estoy pulsando.

Espero haberme explicado medianamente bien, cualquier cosa edito. Gracias por la ayuda.

2 respuestas 2

2

La respuesta de @Mauricio Contreras esta bien, pero te dejo otra solución para evitar inline-javascript y que sea más limpio el código (DRY) y sobre todo más flexible:

var target = document.querySelectorAll('img.test');
var arrTarget = [];

target.forEach(function(element) {
  
  element.onclick = function(e) {
  
    e.preventDefault();
    
    console.log('Click en: ' + this.getAttribute('attr-src'));
    
    // Lo puedes meter un array
    arrTarget.push(this.getAttribute('attr-src'));
    console.log('En array: '+ arrTarget);
  };
});
<img class="test" attr-src="variable1.com" src="https://dummyimage.com/100x100/000ecc/fff" attr-src="variable1.com">
<img class="test" attr-src="variable2.com" src="https://dummyimage.com/100x100/f00/fff" attr-src="variable2.com">
<img class="test" attr-src="variable3.com" src="https://dummyimage.com/100x100/ccc/fff" attr-src="variable1.com">
<img class="test" attr-src="variable4.com" src="https://dummyimage.com/100x100/000/fff" attr-src="variable2.com">

1

La idea la tienes y vas bien encaminado. Lo que debes hacer es usar getAttribute directamente sobre el elemento al que haces el click. Además no necesitas crear el array x con todos los elementos.

PROBLEMA

Se quiere obtener el valor de un atributo en un elemento HTML al hacer click sobre dicho elemento.

SOLUCION

Usaremos el método onclick de HTML para llamar a una función JS. A dicha función le pasaremos como argumento el valor del atributo attr-src del elemento al que le estamos haciendo click. Para esto usaremos la palabra clave this, la cual apunta al elemento que hacemos click.

El código podría quedar de la siguiente manera:

function funcion(attr) {
  var atributo = attr;
  alert(atributo);
}
<img class="test" src="imagen.png" attr-src="variable1" onclick="funcion(this.getAttribute('attr-src'))">
  <br>
  <img class="test" src="imagen.png" attr-src="variable2" onclick="funcion(this.getAttribute('attr-src'))">
  <br>
  <img class="test" src="imagen.png" attr-src="variable3" onclick="funcion(this.getAttribute('attr-src'))">
  <br>
  <img class="test" src="imagen.png" attr-src="variable4" onclick="funcion(this.getAttribute('attr-src'))">
  <br>
  <img class="test" src="imagen.png" attr-src="variable5" onclick="funcion(this.getAttribute('attr-src'))">
  <br>
  <img class="test" src="imagen.png" attr-src="variable6" onclick="funcion(this.getAttribute('attr-src'))">
  <br>
  <img class="test" src="imagen.png" attr-src="variable7" onclick="funcion(this.getAttribute('attr-src'))">
  <br>

En el código anterior, cada elemento img tiene un atributo attr-src con un valor diferente. Al hacer click sobre cualquier imagen el valor de attr-src es capturado y pasado a nuestra función.

Espero que te sirva de ayuda.

1
  • Perfecto! Mejor explicado no podria estar :)
    – Caldeiro
    Commented el 26 ene. 2019 a las 19:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.