Werk met die toggleClass-metode in jQuery

Daar is ook 'n nuttige metode toggleClass, wat die gespesifiseerde klas sal byvoeg, as dit nie daar is nie, en dit sal verwyder as dit wel daar is. Dit mag nodig wees, sodat met 'n klik op dieselfde knoppie periodieke veranderinge met 'n bladsyelement plaasvind.

Kom ons beskou hierdie metode aan die hand van 'n voorbeeld. Laat ons sê ons het die volgende CSS-style:

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

Daar is ook 'n paragraaf met die klas zzz:

<p class="zzz" id="test">text</p>
<button>click</button>

Kom ons maak byvoorbeeld so, dat met die eerste druk op die knoppie, die element die klas red bygevoeg kry, wat 'n rooi kleur byvoeg, en met 'n herhaalde druk - hierdie klas sal verwyder word en die rooi kleur sal verdwyn. As jy weer op die knoppie druk - sal alles weer herhaal.

Probeer om die volgende kode uit te voer en oortuig jouself hiervan (die klas zzz verteenwoordig kursief, om te wys dat toggleClass nie ander klasse sal verhinder om te werk nie):

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

Na die eerste druk sal die HTML-kode so lyk (die klas red sal bygevoeg word):

<p class="zzz red" id="test">text</p>
<button>click</button>

En na die tweede druk - so (die klas red sal verdwyn):

<p class="zzz" id="test">text</p>
<button>click</button>

Voeg aan alle li die klas www by, as dit nie daar is nie, en verwyder dit as dit daar is.