Heim  >  Artikel  >  Web-Frontend  >  Wie löst man Ereignisse für sichtbare Divs in jQuery aus?

Wie löst man Ereignisse für sichtbare Divs in jQuery aus?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 10:30:02556Durchsuche

How to Trigger Events for Visible Divs in jQuery?

JQuery zum Auslösen von Ereignissen für sichtbare Divs verwenden

In jQuery können Sie einen „isvisible“ Ereignishandler anhängen, um die Sichtbarkeit eines Div-Elements zu überwachen und bestimmte Aktionen auszulösen wenn es sichtbar wird.

Der bereitgestellte Pseudocode kann wie folgt implementiert werden:

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

Dieser Code weist dem #contentDiv-Div einen Event-Handler zu, der die Alarmfunktion ausführt, wenn das Div sichtbar wird .

jQuery-Erweiterungsansatz:

Alternativ können Sie die .show()-Methode erweitern, um Ereignisse vor und nach der Anzeige des Div auszulösen:

Erweiterung:

<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>

Verwendung:

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

Mit diesem Ansatz können Sie Ereignisse auslösen, bevor und nachdem das Div angezeigt wird unter Beibehaltung des Verhaltens der ursprünglichen .show()-Methode.

Das obige ist der detaillierte Inhalt vonWie löst man Ereignisse für sichtbare Divs in jQuery aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn