2

si tengo por ejemplo:

<p class="miclase" onclick="accion()">Texto1</p>
<p class="miclase" onclick="accion()">Texto2</p>
<p class="miclase" onclick="accion()">Texto3</p> 

¿como hago para que a través de jQuery me cambie solo el texto de la etiqueta p clickada? No puedo usar ids, ni varias clases. Con

$('.miclase').text(nuevo texto')

Obvamiente me cambia el texto en todos los p de la misma clase.

Gracias

2 respuestas 2

4

Aunque el ejemplo es en JS, puedes fácilmente pasarlo a JQuery.

  • Tomamos todos los elementos que comparten a la misma clase y los almacenamos en una variable
  • Iteramos los elementos que esa variable contiene en un ciclo forEach
  • Al parámetro que nos representa a cada elemento en las iteraciones que hace el ciclo le damos un listener en su evento click
  • Posterior modificamos a este parámetro el valor que tiene en su propiedad innerText dándole un contenido personalizado

      <p class="miclase">Texto1</p>
      <p class="miclase">Texto2</p>
      <p class="miclase">Texto3</p> 
    
    <script>
      let textos = document.querySelectorAll('.miclase');
      
      textos.forEach((texto) => {
        texto.addEventListener('click', () => {
          texto.innerText = `Contenido: ${Math.random().toFixed(1)}`;
        });
      });
    </script>

De esta manera empleas a la misma clase que se comparten los 3 párrafos, sacas a la lógica del llamado de la función del HTML y evitas que el mismo texto se aplique a todos los elementos.

Referencias

2
  • 1
    Muy buen explicación. +1
    – quevedo
    el 4 ago. 2020 a las 19:15
  • 1
    Podrías usar delegación de eventos así te ahorras iterar y crear n EventListener
    – Marcos
    el 4 ago. 2020 a las 19:43
1

Puedes pasar como argumento, en la llamada a la función, la instancia del elemento p sobre el que se ha realizado el clic del usuario, usando this.

Para el efecto, he agregado un argumento llamado sender con el que haré referencia al elemento, dentro de la función:

function accion(sender) {
  sender.innerHTML = 'nuevo texto';
}
<p class="miclase" onclick="accion(this)">Texto1</p>
<p class="miclase" onclick="accion(this)">Texto2</p>
<p class="miclase" onclick="accion(this)">Texto3</p>

Tu Respuesta

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

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