ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery の要素の可視性の変更をどのように検出しますか?

jQuery の要素の可視性の変更をどのように検出しますか?

Susan Sarandon
リリース: 2024-10-30 00:25:02
オリジナル
397 人が閲覧しました

How do you detect visibility changes for elements in jQuery?

jQuery を使用した可視性の変更の検出

動的コンテンツを操作する場合、特定の要素の可視性に基づいてアクションを実行する必要があります。 jQuery は、div が表示されたときにトリガーするイベント ハンドラーをアタッチする方法を提供します。

解決策:

これを実現するには、既存の jQuery .show() を拡張します。可視性の変更前後のメソッドとトリガー イベント。カスタム拡張コード スニペットは次のとおりです:

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]);
    });
  }
});
ログイン後にコピー

使用法:

拡張 .show() メソッドを使用するには、イベントを beforeShow トリガーと afterShow トリガーにバインドできます。 。例:

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});
ログイン後にコピー

このコードは、ID テストを持つ div が表示または非表示になったときに beforeShow および afterShow イベントをトリガーし、可視性の変更に基づいてカスタム コードを実行できるようにします。

以上がjQuery の要素の可視性の変更をどのように検出しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート