jQuery toggleCLass() -menetelmää käytetään yhden tai useamman luokan lisäämiseen tai poistamiseen valituista elementeistä. Tämä menetelmä vaihtaa yhden tai useamman luokan nimen lisäämisen ja poistamisen välillä. Se tarkistaa kunkin elementin määritetyt luokan nimet. Jos luokan nimi on jo asetettu, se poistaa ja jos luokan nimi puuttuu, se lisää.
Tällä tavalla se luo vaihtovaikutelman. Sen avulla voit myös määrittää vain lisäämisen tai poistamisen kytkinparametrin avulla.
Syntaksi :
$(selector).toggleClass(classname,function(index,currentclass),switch)
jQuery toggleClass() -metodin parametrit
| Parametri | Kuvaus | ||
|---|---|---|---|
| luokan nimi | Se on pakollinen parametri. Se määrittää yhden tai useamman lisättävän tai poistettavan luokan nimen. Jos käytät useita luokkia, erota ne välilyönnillä. | ||
| funktio (indeksi, nykyinen luokka) | Se on valinnainen parametri. Se määrittää yhden tai useamman luokan nimen, jonka haluat lisätä tai poistaa.| Indeksi: | Se tarjoaa elementin indeksipaikan joukossa.Nykyinen luokka: | Se tarjoaa valitun elementin nykyisen luokan nimen. |
| vaihtaa | Se on myös valinnainen parametri. Se on Boolen arvo, joka määrittää, lisätäänkö luokka (tosi) vai poistetaanko se (false). |
Esimerkki jQuery toggleClass() -menetelmästä
Otetaan esimerkki jQuery toggleClass() -menetelmän vaikutuksen havainnollistamiseksi.
$(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> Testaa nyt jQuery toggleClass() esimerkki 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' ); }); Testaa nyt jQuery toggleClass() esimerkki 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(); }); Testaa nyt