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 중국어 웹사이트의 기타 관련 기사를 참조하세요!