Metode jQuery toggleCLass() tiek izmantota, lai pievienotu vai noņemtu vienu vai vairākas klases no atlasītajiem elementiem. Šī metode pārslēdz viena vai vairāku klases nosaukumu pievienošanu un noņemšanu. Tas pārbauda katru elementu norādītajiem klašu nosaukumiem. Ja klases nosaukums jau ir iestatīts, tas tiek noņemts, un, ja klases nosaukuma trūkst, tas tiek pievienots.
Tādā veidā tas rada pārslēgšanas efektu. Tas arī ļauj norādīt tikai pievienošanu vai tikai noņemšanu, izmantojot slēdža parametru.
Sintakse :
$(selector).toggleClass(classname,function(index,currentclass),switch)
jQuery toggleClass() metodes parametri
| Parametrs | Apraksts | ||
|---|---|---|---|
| klases nosaukums | Tas ir obligāts parametrs. Tas norāda vienu vai vairākus klases nosaukumus, kas jāpievieno vai jānoņem. Ja izmantojat vairākas klases, atdaliet tās ar atstarpi. | ||
| funkcija (indekss, pašreizējā klase) | Tas ir izvēles parametrs. Tas norāda vienu vai vairākus klases nosaukumus, kurus vēlaties pievienot vai noņemt.| Indekss: | Tas nodrošina elementa indeksa pozīciju komplektā.Pašreizējā klase: | Tas nodrošina atlasītā elementa pašreizējo klases nosaukumu. |
| slēdzis | Tas ir arī izvēles parametrs. Tā ir Būla vērtība, kas norāda, vai klase ir jāpievieno (true) vai jānoņem (false). |
jQuery toggleClass() metodes piemērs
Ņemsim piemēru, lai parādītu jQuery toggleClass() metodes efektu.
$(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> Izmēģiniet to tūlīt jQuery toggleClass() 2. piemērs
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' ); }); Izmēģiniet to tūlīt jQuery toggleClass() 3. piemērs
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(); }); Izmēģiniet to tūlīt