Una de las (muchas) ventajas que tiene jQuery es que no sólo permite añadir, eliminar, remplazar elementos seleccionados, también permite modificar sus propiedades. En este post explicaré cómo cambiar clases con jQuery.
Las clases permiten agrupar una serie elementos a los cuáles se les puede aplicar los mismos estilos. Esto es muy útil si se quieren realizar efectos visuales avanzados usando jQuery. Por ejemplo, cuando pasas el ratón por encima de un elemento puedes cambiar la clase darle el estilo que tiene esa clase. Si tienes alguna duda con las clases en CSS te recomiendo que vengas aquí.
Función addClass()
Añade una clase específica a un elemento. Se emplea justo después de una selección de un elemento y pasas un parámetro como string que representa la clase con el nombre que quieras. Por ejeplo, añadir la clase enlacExterno a todos los enlaces que comiencen por http://:
|
1 |
$('a[href^="http://"]').addClass('enlacExterno'); |
El código HTML pasaría de
|
1 |
<a href="https://guidacode.com/"> |
a
|
1 |
<a href="https://guidacode.com/" class="enlacExterno"> |
Antes de llamar a esta función es preciso que ya tengas creadas la clase con las reglas de estilo que quieras. Así cuando jQuery añada el nombre de clase, aplicará las propiedades de estilo que le especificaste.
Esta función solamente añade, no sobrescribe de manera que si el elemento seleccionado ya tenía clases, estas seguirán estando añadiendo a mayores la que especificas en la función.
Función removeClass()
Lo contrario que la función anterior, elimina la clase especificada de los elementos seleccionados. Por ejemplo que todos los <h1> se elimine la clase «subrayado».
|
1 |
$('h1').removeClass('subrayado'); |
Función toggleClass()
Permite alternar una clase. Esto significa que añade la clase si no existe y la elimina si lo está. Esta función se emplea mucho para mostrar y ocultar un elemento.
Por ejemplo, cuando se clica un botón se cambia el fondo de la página. Para que esto funcione debería de estar la clase creada.
|
1 2 3 |
.verde{ background-color: green; } |
Con la clase ya definida, podemos alternarla cada vez que se clique un botón, en este caso con el ID «cambio».
|
1 2 3 |
$('#cambio').click(function() { $('body').toggleClass('verde'); }); |
Recuerda que para las funciones addClass() y removeClass() no es preciso que el nombre de la clase vaya precedido de un punto. Por ejemplo, addClass(.enlaceexterno) estaría mal.
Recuerda que para estas funciones no es preciso que el nombre de la clase vaya precedido de un punto. Por ejemplo, addClass(.enlacExterno) estaría mal.
Y hasta aquí como gestionar las clases con jQuery, espero que os haya gustado. Felices fiestas! 🙂