Metoden jQuery toggleCLass() används för att lägga till eller ta bort en eller flera klasser från de valda elementen. Den här metoden växlar mellan att lägga till och ta bort ett eller flera klassnamn. Den kontrollerar varje element för de angivna klassnamnen. Om klassnamnet redan är inställt tas det bort och om klassnamnet saknas läggs det till.
På detta sätt skapar den växlingseffekten. Det underlättar också för dig att ange att endast lägga till eller endast ta bort genom att använda switchparametern.
Syntax :
$(selector).toggleClass(classname,function(index,currentclass),switch)
Parametrar för jQuery toggleClass()-metoden
| Parameter | Beskrivning | ||
|---|---|---|---|
| klassnamn | Det är en obligatorisk parameter. Den anger ett eller flera klassnamn som ska läggas till eller tas bort. Om du använder flera klasser, separera dem med mellanslag. | ||
| funktion (index, aktuell klass) | Det är en valfri parameter. Den anger ett eller flera klassnamn som du vill lägga till eller ta bort.| Index: | Det ger indexpositionen för elementet i uppsättningen.Aktuell klass: | Det ger det aktuella klassnamnet för det valda elementet. |
| växla | Det är också en valfri parameter. Det är ett booleskt värde som anger om klassen ska läggas till (true) eller tas bort (false). |
Exempel på jQuery toggleClass()-metoden
Låt oss ta ett exempel för att visa 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> Testa det nu jQuery toggleClass() exempel 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' ); }); Testa det nu jQuery toggleClass() exempel 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(); }); Testa det nu