Cómo cambiar una clase con jQuery

Con los métodos de jQuery addClass() y removeClass() podemos manipular las clases asignadas a los elementos. El primer método se utiliza para añadir y el segundo para eliminar una o varias clases.

También disponemos del método toggleClass(), que agrega o elimina una o más clases según la presencia de la misma.

Sintaxis

• $(elemento).addClass(nombreClase,function(index,oldclass));
• $(elemento).removeClass(nombreClase,function(index,oldclass));
• $(elemento).toggleClass(nombreClase,function(index,oldclass),switch);

Los parámetros disponibles:

• elemento (obligatorio): Objeto al cual queremos añadir o eleminar una o varias clases.
• nombreClase (obligatorio): Nombre de la clase existente que queremos asignar.
• function (opcional): Al usar la Función callback por defecto nos devuelve estos valores: index con el número de posición del elemento en el DOM, y oldclass con la clase actual del elemento.
• switch: Opcional. Un valor booleano que especifica si la clase solo debe agregarse (verdadero) o solo eliminarse (falso).

Cambiar clase con jQuery

Podemos añadir o eliminar una clase a un elemento DOM desde cualquier evento que se nos ocurra, en el momento de carga de la página, desde un botón, un enlace…

El ejemplo que te muestro se basa en tres botones, uno para añadir una clase específica, el otro para eliminarla y el tercero para hacer lo mismo pero solo con un botón.

En este caso básico, el resultado a obtener es modificar el color de un párrafo. Aquí tienes el código para entenderlo más fácilmente, ahí va:

Conclusiones

Como ves, no es difícil manipular el DOM a nuestro antojo, solo falta echarle imaginación para añadir funcionalidades o cambios visuales.

¡Ah! También disponemos del método hasClass() que determina si a alguno de los elementos coincidentes se le asigna la clase dada.

¡Nos vemos en la próxima! Chaito.