Εργασία με την μέθοδο toggleClass στο jQuery

Υπάρχει επίσης μια χρήσιμη μέθοδος toggleClass, η οποία θα προσθέσει την καθορισμένη κλάση, αν αυτή δεν υπάρχει, και θα την αφαιρέσει αν υπάρχει. Μπορεί να χρειαστεί, για να συμβαίνουν περιοδικές αλλαγές σε ένα στοιχείο της σελίδας με κάθε κλικ στο ίδιο κουμπί.

Ας εξετάσουμε αυτή τη μέθοδο με ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε τα ακόλουθα CSS στυλ:

css.red {
  color: red;
}
  
.zzz {
  font-style: italic;
}

Υπάρχει επίσης μια παράγραφος με την κλάση zzz:

html<p class="zzz" id="test">κείμενο</p>
<button>κλικ</button>

Ας κάνουμε, για παράδειγμα, το εξής: στο πρώτο πάτημα στο κουμπί, στο στοιχείο θα προστεθεί η κλάση red, που προσθέτει κόκκινο χρώμα, και στο δεύτερο - αυτή η κλάση θα αφαιρεθεί και το κόκκινο χρώμα θα εξαφανιστεί. Αν πατηθεί ξανά το κουμπί - όλα θα επαναληφθούν.

Δοκιμάστε να εκτελέσετε τον ακόλουθο κώδικα και βεβαιωθείτε για αυτό (η κλάση zzz επισημαίνει το κείμενο με πλάγια γραφή, για να δείξει ότι η toggleClass δεν παρεμβαίνει στην λειτουργία άλλων κλάσεων):

javascript$('button').click(function() {
  $('#test').toggleClass('red');
});

Μετά το πρώτο πάτημα ο HTML κώδικας θα γίνει έτσι (θα προστεθεί η κλάση red):

html<p class="zzz red" id="test">κείμενο</p>
<button>κλικ</button>

Και μετά το δεύτερο πάτημα - έτσι (θα εξαφανιστεί η κλάση red):

html<p class="zzz" id="test">κείμενο</p>
<button>κλικ</button>