De methode jQuery toggleCLass() wordt gebruikt om een of meer klassen aan de geselecteerde elementen toe te voegen of te verwijderen. Deze methode schakelt tussen het toevoegen en verwijderen van een of meer klassennamen. Het controleert elk element op de opgegeven klassenamen. Als de klassenaam al is ingesteld, wordt deze verwijderd en als de klassenaam ontbreekt, wordt deze toegevoegd.
Op deze manier wordt het schakeleffect gecreëerd. Het maakt het u ook gemakkelijker om op te geven of u alleen wilt toevoegen of alleen wilt verwijderen door gebruik te maken van de switch-parameter.
Syntaxis :
$(selector).toggleClass(classname,function(index,currentclass),switch)
Parameters van de methode jQuery toggleClass().
| Parameter | Beschrijving | ||
|---|---|---|---|
| naam van de klasse | Het is een verplichte parameter. Het specificeert een of meer klassennamen die moeten worden toegevoegd of verwijderd. Als u meerdere klassen gebruikt, scheid ze dan op spatie. | ||
| functie (index, huidige klasse) | Het is een optionele parameter. Het specificeert een of meer klassenamen die u wilt toevoegen of verwijderen.| Inhoudsopgave: | Het geeft de indexpositie van het element in de set weer.Huidige klasse: | Het geeft de huidige klassenaam van het geselecteerde element weer. |
| schakelaar | Het is ook een optionele parameter. Het is een Booleaanse waarde die specificeert of de klasse moet worden toegevoegd (true) of verwijderd (false). |
Voorbeeld van de jQuery toggleClass()-methode
Laten we een voorbeeld nemen om het effect van de methode jQuery toggleClass() te demonstreren.
$(document).ready(function(){ $('button').click(function(){ $('p').toggleClass('main'); }); }); .main { font-size: 150%; color: red; } Toggle class 'main' for p elements <p>Hello! javatpoint.com</p> <p>This is popular tutorial website.</p> <p> <b>Note:</b> Click repeatedly on the button to see the toggle effect.</p> Test het nu jQuery toggleClass() voorbeeld 2
toggleClass demo p { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; } .blue { color: black; } .highlight { background: pink; } <p>www.javatpoint.com</p> <p>Java Tutorial</p> <p>SQL Tutorial</p> <p>Android Tutorial</p> <p>HTML Tutorial</p> <p>etc.</p> $( 'p' ).click(function() { $( this ).toggleClass( 'highlight' ); }); Test het nu jQuery toggleClass() voorbeeld 3
toggleClass demo .wrap > div { float: left; width: 100px; margin: 1em 1em 0 0; padding=left: 3px; border: 1px solid #abc; } div.a { background-color: aqua; } div.b { background-color: burlywood; } div.c { background-color: cornsilk; } toggle toggle a toggle a b toggle a b c <a href="#">Reset</a> var cls = [ '', 'a', 'a b', 'a b c' ]; var divs = $( 'div.wrap' ).children(); var appendClass = function() { divs.append(function() 'none' ) + ' '; ); }; appendClass(); $( 'button' ).on( 'click', function() undefined; divs.toggleClass( tc ); appendClass(); ); $( 'a' ).on( 'click', function( event ) { event.preventDefault(); divs.empty().each(function( i ) { this.className = cls[ i ]; }); appendClass(); }); Test het nu