Die jQuery-Methode toggleCLass() wird verwendet, um eine oder mehrere Klassen zu den ausgewählten Elementen hinzuzufügen oder daraus zu entfernen. Diese Methode schaltet zwischen dem Hinzufügen und Entfernen eines oder mehrerer Klassennamen um. Es prüft jedes Element auf die angegebenen Klassennamen. Wenn der Klassenname bereits festgelegt ist, wird er entfernt, und wenn der Klassenname fehlt, wird er hinzugefügt.
Auf diese Weise entsteht der Toggle-Effekt. Außerdem können Sie mithilfe des Schalterparameters angeben, ob nur etwas hinzugefügt oder nur entfernt werden soll.
Syntax :
$(selector).toggleClass(classname,function(index,currentclass),switch)
Parameter der jQuery-Methode toggleClass()
| Parameter | Beschreibung | ||
|---|---|---|---|
| Klassenname | Es handelt sich um einen obligatorischen Parameter. Es gibt einen oder mehrere Klassennamen an, die hinzugefügt oder entfernt werden sollen. Wenn Sie mehrere Klassen verwenden, trennen Sie diese durch Leerzeichen. | ||
| Funktion (Index, aktuelle Klasse) | Es handelt sich um einen optionalen Parameter. Es gibt einen oder mehrere Klassennamen an, die Sie hinzufügen oder entfernen möchten.| Index: | Es gibt die Indexposition des Elements in der Menge an.Aktuelle Klasse: | Es liefert den aktuellen Klassennamen des ausgewählten Elements. |
| schalten | Es ist auch ein optionaler Parameter. Es handelt sich um einen booleschen Wert, der angibt, ob die Klasse hinzugefügt (wahr) oder entfernt (falsch) werden soll. |
Beispiel für die jQuery-Methode toggleClass()
Nehmen wir ein Beispiel, um die Wirkung der jQuery-Methode toggleClass() zu demonstrieren.
$(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> Testen Sie es jetzt jQuery toggleClass() Beispiel 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' ); }); Testen Sie es jetzt jQuery toggleClass() Beispiel 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(); }); Testen Sie es jetzt