toggle

英[ˈtɒgl] 　　美[ˈtɑ:gl]

n. Bouton de bâton ; clé de conversion ; clé de commutation

v switch

class

英[kl. ɑ:s ] 美[klæs]

n.Classe; classe; catégorie

vt Classer... dans un certain niveau, traiter... comme (ou classer, catégoriser... dans une certaine classe

adj). . Très bon, excellent, exceptionnel

vi Appartenir à... une catégorie (ou un niveau), être répertorié comme une certaine catégorie (ou niveau)

.

méthode jquery toggleClass() syntaxe

Fonction : toggleClass() commute une ou plusieurs classes qui définissent ou suppriment l'élément sélectionné. Cette méthode vérifie la classe spécifiée dans chaque élément. Ajoute la classe si elle n'existe pas ou la supprime si elle est définie. C'est ce qu'on appelle un effet bascule. Cependant, en utilisant le paramètre « switch », vous pouvez spécifier que seules les classes soient supprimées ou seulement ajoutées.

Syntaxe : $(selector).toggleClass(class,switch)

Paramètres :

Paramètre Description
class Require d. Spécifie l'ajout ou la suppression d'éléments spécifiés de la classe. Si vous devez spécifier plusieurs classes, utilisez des espaces pour séparer les noms de classe.
switch Facultatif. Valeur booléenne. Spécifie s’il faut ajouter ou supprimer des classes.

Utiliser la fonction pour changer de classe Syntaxe : $(selector).toggleClass(function(index,class),switch)

Paramètres :

ParametersDescription
fonction (index, classe) Obligatoire. Spécifie une fonction qui renvoie un ou plusieurs noms de classe qui doivent être ajoutés ou supprimés.
index Facultatif. Accepte la position d'index du sélecteur.
cours facultatif. Accepte la classe actuelle du sélecteur.
switch Facultatif. Valeur booléenne. Spécifie s’il faut ajouter (true) ou supprimer (false) une classe.

méthode jquery toggleClass() exemple

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("main");
  });
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>
Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne