Alternar clase en jQuery

La publicación de hoy enseñará sobre la clase alternar en jQuery.

Alternar clase en jQuery

jQuery proporciona un método de alternar de clase incorporado. Este evento agrega o elimina una o más clases de cada elemento en el conjunto de elementos coincidentes según la existencia de la clase o el valor del argumento de estado.

Sintaxis:

.toggleClass(className).toggleClass(classNames)

1. className es una o más clases (separadas por espacios) para alternar para cada elemento en el conjunto coincidente.
2. classNames es una matriz de clases que alternan para cada elemento en el conjunto coincidente.

El método toggle toma una o más clases como parámetros. Si un elemento del conjunto de elementos coincidentes ya tiene la clase en la primera versión, se elimina.

Si un elemento no tiene la clase, se agregará. Podemos aplicar .toggleClass() a un simple <div>, por ejemplo.

El segundo modelo de .toggleClass() usa el segundo parámetro para determinar si agregar o eliminar la clase. Si el valor de este parámetro es true, se añade la clase; si es false, se elimina la clase.

Si no se exceden los argumentos, .toggleClass() alterna todas las clases del elemento cuando se invoca .toggleClass() como la primera vez.

Entendámoslo con el siguiente ejemplo.

<p class="blue">Click on me to change color</p>

.blue {
    color: blue;
  }
.highlight {
    background: yellow;
}

$('p').click(function() {
  $(this).toggleClass('highlight');
});

El ejemplo anterior ha definido una etiqueta de párrafo con una clase azul. Una vez que el usuario haya hecho clic en el párrafo, aplicará .toggleClass("highlight") al párrafo.

Ejecute el código anterior en cualquier navegador que admita jQuery; mostrará el resultado a continuación.

Producción:

Antes de alternar:

Después de alternar: