Metoda jQuery toggleCLass() este folosită pentru a adăuga sau elimina una sau mai multe clase din elementele selectate. Această metodă comută între adăugarea și eliminarea unuia sau mai multor nume de clasă. Verifică fiecare element pentru numele claselor specificate. Dacă numele clasei este deja setat, se elimină și dacă numele clasei lipsește, se adaugă.
În acest fel, se creează efectul de comutare. De asemenea, vă facilitează specificarea pentru adăugarea sau eliminarea numai prin utilizarea parametrului switch.
Sintaxă :
$(selector).toggleClass(classname,function(index,currentclass),switch)
Parametrii metodei jQuery toggleClass().
| Parametru | Descriere | ||
|---|---|---|---|
| numele clasei | Este un parametru obligatoriu. Specifică unul sau mai multe nume de clasă de adăugat sau eliminat. Dacă utilizați mai multe clase, separați-le prin spațiu. | ||
| functie (index, currentclass) | Este un parametru opțional. Specifică unul sau mai multe nume de clasă pe care doriți să le adăugați sau să le eliminați.| Index: | Oferă poziția index a elementului în set.Clasa curentă: | Acesta furnizează numele actual al clasei elementului selectat. |
| intrerupator | Este, de asemenea, un parametru opțional. Este o valoare booleană care specifică dacă clasa trebuie adăugată (adevărat) sau eliminată (fals). |
Exemplu de metodă jQuery toggleClass().
Să luăm un exemplu pentru a demonstra efectul metodei jQuery toggleClass().
$(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> Testează-l acum Exemplul 2 de jQuery toggleClass()
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' ); }); Testează-l acum Exemplul 3 de jQuery toggleClass()
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(); }); Testează-l acum