Comment puis-je contrôler la visibilité des éléments dans jQuery au-delà de « .hide() » et « .show() » ?

Obtenir la visibilité des éléments avec jQuery : au-delà de .hide() et .show()

Les jQuery .hide() et .show( ) sont devenues des outils essentiels pour manipuler la visibilité des éléments en fonction des paramètres d'affichage CSS. Cependant, il peut y avoir des scénarios dans lesquels l'ajustement de la propriété d'affichage n'est pas suffisant ou souhaité. Pour répondre à ce besoin, il est possible de créer des fonctions jQuery personnalisées qui ciblent la propriété de visibilité.

Création de fonctions de visibilité personnalisées

Pour créer des fonctions personnalisées qui ciblent la visibilité, nous peut exploiter la méthode .css(). Les exemples suivants montrent comment définir des fonctions pour masquer, afficher et basculer la visibilité :

jQuery.fn.visible = function() {
  return this.css('visibility', 'visible');
};

jQuery.fn.invisible = function() {
  return this.css('visibility', 'hidden');
};

jQuery.fn.visibilityToggle = function() {
  return this.css('visibility', function(i, visibility) {
    return (visibility == 'visible') ? 'hidden' : 'visible';
  });
};

Surcharge de la fonction toggle()

Si une intégration plus transparente avec la fonction toggle() existante est privilégiée, il est possible de la surcharger pour gérer la visibilité :

!(function($) {
  var toggle = $.fn.toggle;
  $.fn.toggle = function() {
    var args = $.makeArray(arguments),
      lastArg = args.pop();

    if (lastArg == 'visibility') {
      return this.visibilityToggle();
    }

    return toggle.apply(this, arguments);
  };
})(jQuery);

Avec ces fonctions personnalisées ou techniques de surcharge, vous peut désormais gérer sans effort la visibilité des éléments à l'aide de la syntaxe familière de jQuery sans recourir aux paramètres d'affichage CSS.

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!