Índice

Cambiar entre dos clases CSS

La librería jQuery tiene varios métodos que permiten desencadenar algunas veces una acción y otras veces una acción diferente. Este efecto de permutación se llama toggle. Lo encontraremos varias veces a lo largo de nuestra exploración de jQuery.

Al margen de los efectos espectaculares, estos métodos ahorran muchas líneas de código.

toggleClass(clase)

Añade la clase CSS especificada si no existe, o la elimina si está presente.

$(p).toggleClass("clase1"): aplica la clase clase1 a los párrafos <p> si no existe. Si existe, la elimina.

Este método devuelve un objeto jQuery.

Desde la versión 1.4 de jQuery, es posible realizar este efecto de permutación mediante una función.

toggleClass(función(índice, clase actual), [conmutador])

Donde:

  • función especifica una función que devuelve el nombre de la clase que se tiene que permutar.

  • índice (opcional) es la posición del índice del elemento seleccionado.

  • clase actual (opcional) es el nombre de la clase actual.

  • conmutador es un valor booleano (true o false) que determina si la clase se tiene que añadir o eliminar.

Ejemplo

$(’div.pequeña’).toggleClass(function() { 
    if ($(this).parent().is(’.forma’)) { 
        return ’clase1’; 
    }  
    else {  
        return ’clase2’;  ...