ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery を使用して div が表示されたときにアクションをトリガーするにはどうすればよいでしょうか?

jQuery を使用して div が表示されたときにアクションをトリガーするにはどうすればよいでしょうか?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-01 03:04:02403ブラウズ

How can you trigger actions when a div becomes visible using jQuery?

jQuery を使用した div 可視化時のアクションのトリガー

jQuery では、div が可視になったときに特定のコードを実行するイベント ハンドラーをアタッチすることができます。これを実現するには、次の疑似コードの利用を検討してください。

$(function() {
  $('#contentDiv').isvisible(function() {
    alert("do something");
  });
});

この疑似コードにより、#contentDiv div が表示された場合にのみアラートが発生することが効果的に保証されます。

この機能を実装するには、次のことができます。 jQuery の元の .show() メソッドを拡張します:

<code class="javascript">$.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');

    // Execute the original show() function with the new callback
    _oldShow.apply(obj, [speed, newCallback]);
  });
};</code>

この拡張機能を使用すると、div が表示される前後に 'beforeShow' および 'afterShow' イベントをトリガーできます。

たとえば、次の使用法は機能を示しています:

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

以上がjQuery を使用して div が表示されたときにアクションをトリガーするにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。