Metodi toggleClass
Metodi toggleClass vuorottelee lisäämisen/poistamisen
CSS-luokasta: jos sitä ei ole - se lisää sen, jos se on - se poistaa sen.
Syntaksi
Yksi CSS-luokka:
$(valitsin).toggleClass(luokan nimi);
Vain lisätä tai poistaa CSS-luokan riippuen
toisesta parametrista, joka hyväksyy arvot
true tai false:
$(valitsin).toggleClass(CSS-luokan nimi, tila);
Useita CSS-luokkia:
$(valitsin).toggleClass(['luokka1', 'luokka2', 'luokka3', '...']);
Vain lisätä tai poistaa CSS-luokat riippuen toisesta parametrista:
$(valitsin).toggleClass(['luokka1', 'luokka2', 'luokka3', '...'], tila');
Funktion soveltaminen jokaiseen elementtiin joukossa,
tila voi olla true tai false,
ja osoittaa metodille - vain lisätä tai vain
poistaa CSS-luokan:
$(valitsin).toggleClass(function(numero joukossa, elementin nykyiset luokat, tila), [tila]);
Esimerkki
Meidän kappaleellamme on jo kaksi luokkaa. Lisätään
sille vielä luokka www:
<p id="test" class="eee ggg">teksti</p>
$('#test').toggleClass('www');
HTML-koodi muuttuu näyttämään tältä:
<p id="test" class="eee ggg www">teksti</p>
Esimerkki
Nyt luokka www on jo elementissä
- poistetaan se:
<p id="test" class="eee ggg www">teksti</p>
$('#test').toggleClass('www');
HTML-koodi muuttuu näyttämään tältä:
<p id="test" class="eee ggg">teksti</p>
Katso myös
-
metodit
addClass,removeClass,hasClass -
JavaScript-ominaisuus
classList,
jonka avulla voi vuorotella luokan lisäämisen/poistamisen puhdalla JavaScriptillä
