Metoden jQuery toggleCLass() brukes til å legge til eller fjerne en eller flere klasser fra de valgte elementene. Denne metoden veksler mellom å legge til og fjerne ett eller flere klassenavn. Den sjekker hvert element for de angitte klassenavnene. Hvis klassenavnet allerede er angitt, fjernes det, og hvis klassenavnet mangler, legges det til.
På denne måten skaper den veksleeffekten. Det gjør det også lettere å spesifisere å bare legge til eller bare fjerne ved bruk av bryterparameter.
Syntaks :
$(selector).toggleClass(classname,function(index,currentclass),switch)
Parametre for jQuery toggleClass()-metoden
| Parameter | Beskrivelse | ||
|---|---|---|---|
| klassenavn | Det er en obligatorisk parameter. Den spesifiserer ett eller flere klassenavn som skal legges til eller fjernes. Hvis du bruker flere klasser, må du skille dem med mellomrom. | ||
| funksjon (indeks, gjeldende klasse) | Det er en valgfri parameter. Den spesifiserer ett eller flere klassenavn som du vil legge til eller fjerne.| Indeks: | Det gir indeksposisjonen til elementet i settet.Nåværende klasse: | Den gir det gjeldende klassenavnet til det valgte elementet. |
| bytte om | Det er også en valgfri parameter. Det er en boolsk verdi som spesifiserer om klassen skal legges til (true) eller fjernes (false). |
Eksempel på jQuery toggleClass()-metoden
La oss ta et eksempel for å demonstrere effekten av 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 nå 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 nå 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 nå