jQuery toggleCLass() metodas naudojamas pridėti arba pašalinti vieną ar daugiau klasių iš pasirinktų elementų. Šis metodas perjungia vieno ar kelių klasės pavadinimo pridėjimą ir pašalinimą. Jis patikrina kiekvieną elementą, ar nėra nurodytų klasių pavadinimų. Jei klasės pavadinimas jau nustatytas, jis pašalinamas, o jei trūksta klasės pavadinimo, jis pridedamas.
Tokiu būdu sukuriamas perjungimo efektas. Tai taip pat palengvina, naudojant jungiklio parametrą, nurodyti tik pridėti arba tik pašalinti.
Sintaksė :
$(selector).toggleClass(classname,function(index,currentclass),switch)
jQuery toggleClass() metodo parametrai
| Parametras | apibūdinimas | ||
|---|---|---|---|
| klasės pavadinimas | Tai yra privalomas parametras. Jis nurodo vieną ar daugiau klasės pavadinimų, kuriuos reikia pridėti arba pašalinti. Jei naudojate kelias klases, atskirkite jas tarpu. | ||
| funkcija (indeksas, dabartinė klasė) | Tai neprivalomas parametras. Jis nurodo vieną ar daugiau klasių pavadinimų, kuriuos norite pridėti arba pašalinti.| Indeksas: | Jame pateikiama elemento indekso padėtis rinkinyje.Dabartinė klasė: | Jame pateikiamas dabartinis pasirinkto elemento klasės pavadinimas. |
| jungiklis | Tai taip pat pasirenkamas parametras. Tai Būlio reikšmė, nurodanti, ar klasė turi būti pridėta (tiesa), ar pašalinta (klaidinga). |
jQuery toggleClass() metodo pavyzdys
Paimkime pavyzdį, kad parodytume jQuery toggleClass() metodo poveikį.
$(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> Išbandykite dabar jQuery toggleClass() 2 pavyzdys
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' ); }); Išbandykite dabar jQuery toggleClass() 3 pavyzdys
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(); }); Išbandykite dabar