Heim > Web-Frontend > js-Tutorial > 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
Freigeben: 2024-10-31 10:30:02
Original
667 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Verwendung:

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

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage