La méthode jQuery toggleCLass() est utilisée pour ajouter ou supprimer une ou plusieurs classes des éléments sélectionnés. Cette méthode bascule entre l'ajout et la suppression d'un ou plusieurs noms de classe. Il vérifie chaque élément pour les noms de classe spécifiés. Si le nom de la classe est déjà défini, il le supprime et si le nom de la classe est manquant, il l'ajoute.
De cette façon, cela crée l’effet bascule. Il vous permet également de spécifier d'ajouter ou de supprimer uniquement à l'aide du paramètre switch.
Syntaxe :
$(selector).toggleClass(classname,function(index,currentclass),switch)
Paramètres de la méthode jQuery toggleClass()
| Paramètre | Description | ||
|---|---|---|---|
| nom du cours | C'est un paramètre obligatoire. Il spécifie un ou plusieurs noms de classe à ajouter ou à supprimer. Si vous utilisez plusieurs classes, séparez-les par des espaces. | ||
| fonction (index, classe actuelle) | C'est un paramètre facultatif. Il spécifie un ou plusieurs noms de classe que vous souhaitez ajouter ou supprimer.| Indice: | Il fournit la position d'index de l'élément dans l'ensemble.Classe actuelle : | Il fournit le nom de classe actuel de l'élément sélectionné. |
| changer | C'est également un paramètre facultatif. C'est une valeur booléenne qui précise si la classe doit être ajoutée (vrai) ou supprimée (faux). |
Exemple de méthode jQuery toggleClass()
Prenons un exemple pour démontrer l'effet de la méthode 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> Testez-le maintenant jQuery toggleClass() exemple 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' ); }); Testez-le maintenant jQuery toggleClass() exemple 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(); }); Testez-le maintenant