Comment déterminer si un élément est masqué ou affiché dans jquery

Avant-propos

Dans le développement web, nous avons souvent besoin de changer l'affichage ou le masquage d'un élément en fonction du fonctionnement de l'utilisateur. À l’heure actuelle, vous devez utiliser certaines API dans jQuery pour y parvenir. Cet article explique comment utiliser jQuery pour déterminer l'état masqué et affiché des éléments, et comment changer leur état.

1. Déterminez si l'élément est masqué

Nous pouvons utiliser la méthode .is(":hidden") pour déterminer si l'élément est masqué. L'exemple de code est le suivant :

if ($("#test").is(":hidden")) {
  console.log("The element is hidden.");
} else {
  console.log("The element is visible.");
}

Dans le code ci-dessus, nous trouvons d'abord l'élément avec le test d'identification, puis utilisons la méthode .is(":hidden") pour déterminer s'il est masqué. Si l'élément est masqué, print L'élément est masqué.; sinon print L'élément est visible..

2. Déterminer si l'élément est affiché

Pour déterminer si l'élément est affiché, nous pouvons utiliser la méthode .is(":visible"). L'exemple de code est le suivant :

if ($("#test").is(":visible")) {
  console.log("The element is visible.");
} else {
  console.log("The element is hidden.");
}

Dans le code ci-dessus, nous trouvons toujours l'élément avec le test d'identification puis utilisons la méthode .is(":visible") pour déterminer s'il est affiché. Si l'élément est affiché, print L'élément est visible.; sinon print L'élément est masqué..

3. Changer l'état d'affichage/masquage de l'élément

Si nous voulons changer l'état d'affichage/masquage de l'élément, nous pouvons utiliser la méthode .toggle(). Cette méthode déterminera automatiquement l'état de l'élément. Si l'élément est actuellement masqué, il sera affiché vice versa. L'exemple de code est le suivant :

$("#test").toggle();

Dans le code ci-dessus, nous trouvons d'abord l'élément avec le test d'identification, puis utilisons la méthode .toggle() pour changer son état d'affichage/masquage.

Il convient de noter que lorsque la méthode .toggle() ne passe pas de paramètre, elle change uniquement l'état d'affichage/caché de l'élément ; si un paramètre est passé, alors cette méthode changera l'état d'affichage/masquage de l'élément ; élément en fonction de la valeur du paramètre. Par exemple :

$("#test").toggle(true);

Dans le code ci-dessus, nous définissons le paramètre sur true, ce qui signifie définir l'état d'affichage de l'élément à afficher. Si l'élément est déjà affiché, cette méthode n'aura aucun effet.

4. Afficher/Masquer les éléments

Si nous voulons afficher/masquer les éléments directement au lieu de changer leurs états, nous pouvons utiliser les méthodes .show() et .hide(). La méthode

.show() peut afficher l'élément. L'exemple de code est le suivant :

$("#test").show();

Dans le code ci-dessus, nous définissons l'état d'affichage de l'élément à afficher. La méthode

.hide() peut masquer des éléments. L'exemple de code est le suivant :

$("#test").hide();

Dans le code ci-dessus, nous définissons l'état d'affichage de l'élément sur caché.

Il convient de noter que les méthodes .show() et .hide() ont des paramètres facultatifs qui peuvent être utilisés pour contrôler la vitesse et la méthode des effets d'animation. Pour plus d'informations sur l'utilisation de ces paramètres, veuillez vous référer à la documentation officielle de jQuery.

5. Résumé

Grâce à l'introduction de cet article, nous avons appris comment utiliser jQuery pour déterminer l'état d'affichage/caché des éléments et comment changer leurs états. Dans le développement actuel, nous pouvons implémenter de nombreuses fonctions intéressantes basées sur ces API, telles que changer l'état d'affichage/masqué d'un élément lorsque l'utilisateur clique sur un bouton, ou modifier le contenu d'affichage d'un élément en temps réel en fonction de la saisie de l'utilisateur, etc. . attendez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!