Lezione 13 — Manipolare le classi CSS con addClass, removeClass e toggleClass

Scopri come gestire dinamicamente lo stile dei tuoi elementi web utilizzando i metodi addClass, removeClass e toggleClass di jQuery per creare interfacce interattive.

Introduzione alla gestione delle classi con jQuery

Nel web design moderno, l'estetica di una pagina non è statica. Gli elementi cambiano aspetto quando l'utente interagisce con essi: un pulsante che cambia colore al click, un menu che si espande, o un avviso che diventa rosso in caso di errore. Sebbene sia possibile modificare gli stili CSS direttamente tramite JavaScript (o jQuery) usando il metodo .css(), questa pratica è generalmente sconsigliata per progetti di medie e grandi dimensioni.

Perché? Perché mescolare la logica di programmazione (JavaScript) con la presentazione visiva (CSS) rende il codice difficile da mantenere. La best practice consiste nel definire tutte le varianti stilistiche nel file CSS e utilizzare jQuery per "accendere" o "spegnere" queste varianti aggiungendo o rimuovendo classi CSS.

In questa lezione analizzeremo i tre pilastri della manipolazione delle classi in jQuery: .addClass(), .removeClass() e .toggleClass(). Questi metodi permettono di separare nettamente il cosa succede (logica) dal come appare (stile).

Approfondimento su .addClass()

Il metodo .addClass() viene utilizzato per aggiungere una o più classi CSS a uno o più elementi selezionati. Quando aggiungiamo una classe, jQuery non rimuove le classi già presenti sull'elemento, ma appende semplicemente la nuova classe alla lista.

Perché usare addClass invece di .css()?

Immaginiamo di voler rendere un elemento "attivo". Se usassimo .css(), dovremmo scrivere: $('#mioElemento').css({'color': 'red', 'font-weight': 'bold', 'border': '1px solid black'});

Se domani decidessimo che il colore dell'elemento attivo deve essere blu invece che rosso, dovremmo cercare ogni singola istanza di questo codice in tutti i file JS. Usando .addClass('active'), basta cambiare una sola riga nel file CSS: .active { color: blue; font-weight: bold; border: 1px solid black; }

Ecco un esempio pratico di implementazione:

// Supponiamo di avere un pulsante che, al click, evidenzia un paragrafo
$('#btn-evidenzia').on('click', function() {
    // Selezioniamo il paragrafo e aggiungiamo la classe 'highlight'
    // La classe 'highlight' deve essere definita nel CSS (es. background-color: yellow;)
    $('#testo-da-marcare').addClass('highlight');
    
    console.log('Classe highlight aggiunta con successo!');
});

In questo esempio, l'elemento #testo-da-marcare riceverà la classe highlight. Se l'elemento aveva già una classe (es. <p class="testo">), diventerà <p class="testo highlight">.

Gestire la rimozione con .removeClass()

Il metodo .removeClass() è l'esatto opposto di .addClass(). Rimuove una specifica classe da un elemento. Se la classe specificata non esiste sull'elemento, jQuery non genera errori, ma semplicemente non fa nulla.

Casi d'uso comuni

La rimozione delle classi è fondamentale per gestire gli stati di interfaccia. Un esempio classico è la chiusura di un menu a tendina o la rimozione di un messaggio di errore dopo che l'utente ha corretto l'input in un modulo.

Vediamo come implementare un sistema di "pulizia" degli stati attivi. Spesso, in un menu di navigazione, vogliamo che solo un link alla volta abbia la classe active.

$('.nav-link').on('click', function() {
    // 1. Rimuoviamo la classe 'active' da TUTTI i link della navigazione
    // Questo resetta lo stato precedente
    $('.nav-link').removeClass('active');
    
    // 2. Aggiungiamo la classe 'active' solo all'elemento che ha ricevuto il click
    // 'this' si riferisce all'elemento specifico cliccato
    $(this).addClass('active');
});

In questo snippet, abbiamo combinato i due metodi per creare un comportamento dinamico e coerente. Senza .removeClass(), ogni link cliccato rimarrebbe evidenziato, rendendo l'interfaccia confusa.

L'efficienza di .toggleClass()

Il metodo .toggleClass() è probabilmente il più versatile dei tre. Funziona come un interruttore (switch): se la classe è presente, la rimuove; se non è presente, la aggiunge.

Quando usare toggleClass?

È l'ideale per elementi che hanno due stati alternabili, come:

  • Menu hamburger (aperto/chiuso).
  • Modal di conferma (visibile/nascosto).
  • Modalità scura/chiara (Dark Mode/Light Mode).
  • Pulsanti di "Like" o "Preferiti".

Analizziamo un esempio di implementazione di una Dark Mode per una pagina web:

$('#dark-mode-toggle').on('click', function() {
    // Applichiamo il toggle alla classe 'dark-theme' sul body della pagina
    // Se il body non ha 'dark-theme', verrà aggiunta. Se l'ha già, verrà rimossa.
    $('body').toggleClass('dark-theme');
    
    // Possiamo anche cambiare il testo del pulsante per riflettere lo stato
    if ($('body').hasClass('dark-theme')) {
        $(this).text('Passa a Tema Chiaro');
    } else {
        $(this).text('Passa a Tema Scuro');
    }
});

In questo codice, .toggleClass() gestisce l'intera logica di commutazione dello stile. Abbiamo inoltre utilizzato .hasClass(), un metodo correlato che restituisce un valore booleano (true o false) per verificare la presenza di una classe.

Esempi pratici e scenari reali

Per consolidare questi concetti, vediamo come applicarli in tre scenari comuni di sviluppo web.

Scenario 1: Validazione Form in tempo reale

Immaginiamo un campo email. Se l'utente inserisce un valore non valido, vogliamo che il bordo del campo diventi rosso e appaia un'icona di errore.

  • Azione: Se l'email è invalida $ ightarrow$ .addClass('input-error').
  • Azione: Se l'email diventa valida $ ightarrow$ .removeClass('input-error').

Scenario 2: Accordion (Menu a fisarmonica)

In un'area FAQ, cliccando su una domanda, la risposta deve apparire.

  • Azione: Clic sulla domanda $ ightarrow$ .toggleClass('is-open') sul contenitore della risposta.
  • CSS: .is-open { display: block; } e .answer { display: none; }.

Scenario 3: Filtri di categoria

Un utente clicca su un tag (es. "JavaScript") per filtrare dei post.

  • Azione: Clic sul tag $ ightarrow$ .removeClass('selected') da tutti i tag, poi .addClass('selected') sul tag cliccato.

Errori comuni e FAQ

1. Dimenticare che le classi sono stringhe

Un errore tipico per i principianti è dimenticare le virgolette all'interno del metodo. Sbagliato: $('.elemento').addClass(active); (jQuery cercherà una variabile chiamata active) Corretto: $('.elemento').addClass('active');

2. Confondere .addClass() con l'attributo 'class' di HTML

Alcuni sviluppatori provano a usare .attr('class', 'nuova-classe'). Attenzione: .attr() sovrascrive tutte le classi esistenti. Se l'elemento aveva class="btn primary" e usi .attr('class', 'active'), l'elemento perderà btn e primary e avrà solo active. .addClass() invece è additivo.

3. Chiamare i metodi su elementi non ancora caricati

Se il codice jQuery viene eseguito prima che il DOM sia pronto, i selettori non troveranno nulla. Assicurati sempre di avvolgere il codice in: $(document).ready(function() { ... }); o usare la versione abbreviata $(function() { ... });.

Prossimi passi

Ora che sai come manipolare le classi, hai il potere di creare interfacce dinamiche e professionali. Tuttavia, l'aggiunta di una classe cambia l'aspetto istantaneamente. Per rendere queste transizioni più fluide, ti suggeriamo di approfondire i seguenti argomenti:

  1. Transizioni CSS: Usa la proprietà transition nel tuo CSS per fare in modo che il cambio di colore o dimensione avvenga gradualmente (es. transition: all 0.3s ease;).
  2. Metodi di Animazione jQuery: Esplora .fadeIn(), .fadeOut(), .slideToggle() e .animate() per aggiungere movimento agli elementi insieme al cambio di classe.
  3. Gestione degli Eventi: Approfondisci .on() e .off() per gestire interazioni più complesse.

Esercitazione consigliata: prova a creare una semplice "To-Do List" dove, cliccando su un task, questo viene barrato (usando .toggleClass('completed')) e cambia colore.