Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah anda mengesan perubahan keterlihatan untuk elemen dalam jQuery?

Bagaimanakah anda mengesan perubahan keterlihatan untuk elemen dalam jQuery?

Susan Sarandon
Susan Sarandonasal
2024-10-30 00:25:02312semak imbas

How do you detect visibility changes for elements in jQuery?

Mengesan Perubahan Keterlihatan dengan jQuery

Apabila bekerja dengan kandungan dinamik, tindakan berdasarkan keterlihatan elemen tertentu menjadi perlu. jQuery menyediakan cara untuk melampirkan pengendali acara yang mencetuskan apabila div menjadi kelihatan.

Penyelesaian:

Untuk mencapai ini, anda boleh melanjutkan jQuery .show() sedia ada. kaedah dan peristiwa pencetus sebelum dan selepas perubahan keterlihatan. Berikut ialah coretan kod sambungan tersuai:

jQuery(function($) {

  var _oldShow = $.fn.show;

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

      // Trigger beforeShow event
      obj.trigger('beforeShow');

      // Call the original show method with the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

Penggunaan:

Untuk menggunakan kaedah .show() lanjutan, anda boleh mengikat acara pada pencetus beforeShow dan afterShow . Contohnya:

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});

Kod ini akan mencetuskan acara beforeShow dan afterShow apabila div dengan ujian ID ditunjukkan dan disembunyikan, membolehkan anda melaksanakan kod tersuai berdasarkan perubahan keterlihatan.

Atas ialah kandungan terperinci Bagaimanakah anda mengesan perubahan keterlihatan untuk elemen dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn