ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryで表示可能なDivのイベントをトリガーするにはどうすればよいですか?

jQueryで表示可能なDivのイベントをトリガーするにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-10-31 10:30:02
オリジナル
668 人が閲覧しました

How to Trigger Events for Visible Divs in jQuery?

jQuery を使用して可視 div のイベントをトリガーする

jQuery では、「isvisible」イベント ハンドラーをアタッチして、div 要素の可視性を監視し、特定のアクションをトリガーできます。

提供された疑似コードは次のように実装できます:

<code class="js">$(function () {
  $('#contentDiv').on('isVisible', function () {
    alert("do something");
  });
});</code>
ログイン後にコピー

このコードは、div が表示されたときにアラート関数を実行するイベント ハンドラーを #contentDiv div に割り当てます。 .

jQuery 拡張アプローチ:

または、.show() メソッドを拡張して、div が表示される前後にイベントをトリガーすることもできます:

拡張子:

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

使用法:

<code class="js">$('#test')
  .on('beforeShow', function () {
    alert('beforeShow');
  })
  .on('afterShow', function () {
    alert('afterShow');
  })
  .show(1000, function () {
    alert('in show callback');
  })
  .show();</code>
ログイン後にコピー

このアプローチを使用すると、div が表示される前後にイベントをトリガーできます。元の .show() メソッドの動作を維持しながら。

以上がjQueryで表示可能なDivのイベントをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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