Comment déclencher des événements pour les divisions visibles dans jQuery ?

Utiliser jQuery pour déclencher des événements pour les divs visibles

Dans jQuery, vous pouvez attacher un gestionnaire d'événements "visible" pour surveiller la visibilité d'un élément div et déclencher des actions spécifiques lorsqu'il devient visible.

Le pseudocode fourni peut être implémenté comme suit :

<code class="js">$(function () {
  $('#contentDiv').on('isVisible', function () {
    alert("do something");
  });
});</code>

Ce code attribue un gestionnaire d'événements au div #contentDiv qui exécute la fonction d'alerte lorsque le div devient visible. .

Approche d'extension jQuery :

Vous pouvez également étendre la méthode .show() pour déclencher des événements avant et après l'affichage du div :

Extension :

<code class="js">jQuery(function ($) {
  var _oldShow = $.fn.show;

  $.fn.show = function (speed, oldCallback) {
    return $(this).each(function () {
      var obj = $(this);
      var newCallback = function () {
        if ($.isFunction(oldCallback)) {
          oldCallback.apply(obj);
        }
        obj.trigger('afterShow');
      };

      obj.trigger('beforeShow');
      _oldShow.apply(obj, [speed, newCallback]);
    });
  };
});</code>

Utilisation :

<code class="js">$('#test')
  .on('beforeShow', function () {
    alert('beforeShow');
  })
  .on('afterShow', function () {
    alert('afterShow');
  })
  .show(1000, function () {
    alert('in show callback');
  })
  .show();</code>

Avec cette approche, vous pouvez déclencher des événements avant et après l'affichage du div tout en conservant le comportement de la méthode .show() d'origine.

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!