Geolocalisation Repérer la position géographique
La méthode toggleClass() pour basculer entre l'ajout et la suppression d'une ou plusieurs classes pour les éléments sélectionnés
La méthode toggleClass() bascule entre l'ajout et la suppression d'une ou plusieurs classes pour les éléments sélectionnés.
Cette méthode vérifie chaque élément pour les classes spécifiées. Les classes seront ajoutées si manquantes et enlevé si déjà existantes.
Ce qui crée un effet de bascule.
Cependant, en utilisant le paramètre «commutateur», vous pouvez spécifier pour supprimer uniquement, ou seulement ajouter une classe.
Syntaxe
$(sélecteur).toggleClass(class, commutateur)
| Paramètre | Description |
|---|---|
| class |
Obligatoire. Spécifie un ou plusieurs noms de classe à
ajouter ou supprimer. Pour spécifier plusieurs classes, séparer les noms de classe avec un espace. |
| commutateur | Facultatif. Une valeur booléenne spécifiant si la classe doit être ajoutée (vrai) ou supprimée (faux). |
Exemple1
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style>
.main
{
font-size:150%;
color:red;
}
</style>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Changer de classe</button>
<p><b>Note:</b> Cliquez sur le bouton plus
d'une fois pour voir l'effet de bascule.</p>
</body>
</html>
On peut utiliser une fonction pour spécifier les classes qui doivent être utilisées pour la bascule pour les éléments sélectionnés.
Syntaxe
$(sélecteur).toggleClass(function (index,class), commutateur)
| Paramètre | Description |
|---|---|
| function ( index,Class ) |
Spécifie une fonction qui retourne un ou plusieurs noms de classe
pour ajouter/supprimer.
|
| commutateur | Facultatif. Une valeur booléenne spécifiant si la classe doit être ajoutée (vrai) ou supprimée (faux). |
Exemple
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").toggleClass(function(n){
return "listitem_" + n;
});
});
});
</script>
<style>
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head>
<body>
<h1>Le titre</h1>
<ul>
<li>Piére</li>
<li>Luis</li>
<li>Christine</li>
<li>micheline</li>
</ul>
<button>Ajouter/suprimer classe</button>
</body>
</html>
Exemple
Basculer entre l'ajout et la suppression d'une classe
Comment utiliser la méthode toggleClass() pour basculer entre l'ajout
et la suppression d'une classe.
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style>
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<p class="main">Ceci est un autre paragraphe.</p>
<button>basculer la classe "main" pour les éléments
p</button>
</body>
</html>
Exemple
En utilisant le paramètre de commutateur
Comment utiliser le paramètre commutateur d'ajouter ou de
supprimer d’une classe seulement.
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#add").click(function(){
$("p").toggleClass("main",true);
});
$("#remove").click(function(){
$("p").toggleClass("main",false);
});
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<p class="main">Ceci est un autre paragraphe.</p>
<button id="add">Ajouter la classe "main"</button>
<button id="remove">Suprimer la classe
"main"</button>
</body>
</html>