Metoda jQuery toggleCLass() se uporablja za dodajanje ali odstranjevanje enega ali več razredov iz izbranih elementov. Ta metoda preklaplja med dodajanjem in odstranjevanjem enega ali več imen razreda. Vsak element preveri za navedena imena razredov. Če je ime razreda že nastavljeno, odstrani in če ime razreda manjka, doda.
Na ta način ustvari učinek preklopa. Prav tako vam omogoča, da določite samo dodajanje ali samo odstranjevanje z uporabo preklopnega parametra.
Sintaksa :
$(selector).toggleClass(classname,function(index,currentclass),switch)
Parametri metode jQuery toggleClass().
| Parameter | Opis | ||
|---|---|---|---|
| ime razreda | Je obvezen parameter. Določa eno ali več imen razreda, ki jih želite dodati ali odstraniti. Če uporabljate več razredov, jih ločite s presledkom. | ||
| funkcija (indeks, trenutni razred) | Je neobvezen parameter. Določa eno ali več imen razredov, ki jih želite dodati ali odstraniti.| Indeks: | Zagotavlja položaj indeksa elementa v nizu.Trenutni razred: | Zagotavlja trenutno ime razreda izbranega elementa. |
| stikalo | Je tudi neobvezen parameter. To je logična vrednost, ki določa, ali je treba razred dodati (true) ali odstraniti (false). |
Primer metode jQuery toggleClass().
Vzemimo primer, da pokažemo učinek metode 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> Preizkusite zdaj 2. primer 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' ); }); Preizkusite zdaj 3. primer 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(); }); Preizkusite zdaj