Después de un largo tiempo sin escribir por motivos de trabajo, vuelvo al blog. Hoy voy a anotar un truco con jQuery que puede ahorrarnos mucho código: la función toogle.
La función toogle actúa como un interruptor, de manera que acepta dos parámetros, que serán dos funciones, una para cuando actives el interruptor y otra para cuando lo desactives.
Vamos a ver un ejemplo en el cual añadiremos una clase css a un div pulsando en un botón, de manera que cuando pinchemos en el botón , el div pasará a tener un color de fondo rojo y cuando volvamos a pulsar, el color de fondo desaparecerá.
Vamos a ver el ejemplo:
Primero creamos la clase css:
.rojo{
background:red;
width:200px;
height:300px;
}
Después introducimos el siguiente código javascript en en el head de nuestro documento html:
Usamos los selectores de jQuery para obtener el objeto con id conmutador y le aplicacamos la función toogle.
Y este es el código html que va dentro del body:
Pruebas de jQuery
Ya tenemos nuestro interruptor en javascript con unas pocas líneas de código.