Metoden jQuery toggleCLass() bruges til at tilføje eller fjerne en eller flere klasser fra de valgte elementer. Denne metode skifter mellem at tilføje og fjerne et eller flere klassenavne. Det tjekker hvert element for de angivne klassenavne. Hvis klassenavnet allerede er angivet, fjernes det, og hvis klassenavnet mangler, tilføjes det.
På denne måde skaber det skifte-effekten. Det letter dig også at specificere kun at tilføje eller kun fjerne ved brug af switch parameter.
Syntaks :
$(selector).toggleClass(classname,function(index,currentclass),switch)
Parametre for jQuery toggleClass()-metoden
| Parameter | Beskrivelse | ||
|---|---|---|---|
| klassenavn | Det er en obligatorisk parameter. Det angiver et eller flere klassenavne, der skal tilføjes eller fjernes. Hvis du bruger flere klasser, skal du adskille dem med mellemrum. | ||
| funktion (indeks, nuværende klasse) | Det er en valgfri parameter. Den specificerer et eller flere klassenavne, som du vil tilføje eller fjerne.| Indeks: | Det giver indekspositionen for elementet i sættet.Nuværende klasse: | Det giver det aktuelle klassenavn på det valgte element. |
| kontakt | Det er også en valgfri parameter. Det er en boolsk værdi, som angiver, om klassen skal tilføjes (sand) eller fjernes (falsk). |
Eksempel på jQuery toggleClass() metode
Lad os tage et eksempel for at demonstrere effekten af jQuery toggleClass() metoden.
$(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 det nu jQuery toggleClass() eksempel 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 det nu jQuery toggleClass() eksempel 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 det nu