Cambio de clase de un componente con JQuery

En este artículo te hablaré sobre el uso de función de JQuery toggleClass, que te permite intercambiar clases de un componente en tiempo de ejecución según las necesidades del programador.

$(this).toggleClass('nombre de la clase);

En este ejemplo crearemos por css varias clases con diferentes estilos y tamaños y la intercambiaremos con la función toggleClass.

   1: .image1, .image2, image3{

   2:         float: right; 

   3:         margin-right: 20px; 

   4:         border-radius: 4px; 

   5:         width: 194px; 

   6:         height: 34px;

   7:  }    

   8: .image1{ background: url('../images/image1.png') no-repeat;   }

   9: . image2{background: url('../images/image2.png') no-repeat; }   

  10: . image3{  background: url('../images/image3.png') no-repeat; }

Ahora creamos el fragmento de código html que contendrá las clases creadas.

   1: <div id="example_container">

   2:         <a href="" id="view_images" class=" view_images">

   3:             <div class="images" id="images"></div>

   4:         </a>

   5: </div>

Ahora con el código JQuery podemos cambiar la clase

   1: Clase1

   2: $(‘# view_images).click(function(event){

   3: Event.preventDefault();

   4: $(‘#images’).toggleClass(‘image1’);

   5: })

   6: Clase2

   7: $(‘# view_images).click(function(event){

   8: Event.preventDefault();

   9: $(‘#images’).toggleClass(‘image2’);

  10: })

  11: Clase3

  12: $(‘# view_images).click(function(event){

  13: Event.preventDefault();

  14: $(‘#images’).toggleClass(‘image3’);

  15: })

Otra forma de usarlo sería de la siguiente manera

   1: $(this).toggleClass('opened', x == 1);

Esta sintaxis es la forma abreviada de cambiar una clase si se cumple una condición, en este caso que la variable x sea igual a 1, algo similar a esto:

   1: if (x == 1) {

   2: $(this).addClass('opened');

   3: } else {

   4: $(this).removeClass('opened');

   5: }

En conclusión, hemos visto que la función toggleClass de JQuery puede resultar muy útil para el trabajo con diferentes estilos en una página web. Nos permite hacer de forma dinámica cambios de estado, tamaño, color, etc, de los distintos componentes que conforman la vista que vamos construyendo.