JQuery

Cambiar texto con JQuery

¿Te gustaría cambiar texto con JQuery al realizar cierta acción?. Si es así llegaste al articulo correcto, dentro de este mismo te enseñaré cómo cambiar un texto al realizar una acción; por acción entendemos un hover, un click o cualquier acción permitida por JQuery.

Cómo sabemos JQuery nos ofrece la capacidad de realizar la acción mencionada anteriormente en pocas líneas de código; es importante tener en cuenta que JQuery tiene ciertas acciones que podemos hacer y otras tantas que no podemos hacer, por lo que te recomiendo jugar con el código del ejemplo para que descubras más usos que puedes darle a tu código.

El reemplazar un texto es una tarea muy sencilla y a continuación te explicaré paso a paso lo que debes realizar para llevar a cabo dicha acción de manera correcta; dentro del ejemplo te dejare la estructura en código y el resultado final para que puedas modificarlo a tu gusto, recuerda leer para que sirve cada parte del código; esto te será de gran ayuda para comprender su funcionalidad y usarla en otros escenarios.

Cambiar texto con JQuery

Para nuestro ejemplo tenemos la siguiente situación: Queremos cambiar el texto de un párrafo cuando un botón sea presionado (click), el texto cambiara de «Texto principal» a «Texto cambiado al click» cuando demos un click en nuestro botón.

1. A continuación tenemos el siguiente código HTML, el cual esta compuesto de un párrafo con la clase «p-change» y un botón con la clase «btn-change».


<html>
<p class="p-change">Texto principal</p>
<button class="btn-change">Cambiar texto</button>
</html>

2. Al momento de presionar nuestro botón se deberá cambiar el texto, mediante el siguiente código de JQuery, el cual te explico a continuación.


jQuery( document ).ready(function() {
jQuery(".btn-change").click(function(){
jQuery(".p-change").html("Texto cambiado al click");
});
});

Dentro del código utilizamos el ready document (línea 1) para que nuestro código se ejecute al cargar nuestro sitio web, en la gran mayoría de códigos de JQuery el ready document es utilizado para que el código cargue de forma correcta y sin ningún problema.

Otra función de JQuery que utilizaremos es la de click(), esta es utilizada para realizar acciones cuando se le da clic a un elemento, en este caso nuestro elemento esta indicado por la clase ( jQuery(«.btn-change») ), es importante mencionar que podemos utilizar la clase, el id o simplemente el tipo de elemento al que se le quiere detectar el clic.

Por último tenemos la función html(), la cual nos permite modificar el valor de cualquier elemento HTML, en este caso, un elemento HTML es el que se encuentra dentro de dos etiquetas (abrir y cerrar), cómo podemos ver en el ejemplo, también se utiliza la clase para identificar el elemento HTML ( jQuery(«.p-change») ); el valor html de este elemento es: Texto principal.

Estás serían las funciones que utilizaremos y también el cómo funciona cada una de estás, a continuación te dejo el ejemplo en vivo para que puedas probarlo y observar cual es el resultado.

Resultado

Texto principal


Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba