`.hide()` 및 `.show()` 이외의 jQuery에서 요소 가시성을 어떻게 제어할 수 있습니까?

jQuery로 요소 가시성 확보: .hide() 및 .show()를 넘어

jQuery .hide() 및 .show( ) 메서드는 CSS 표시 설정을 기반으로 요소 가시성을 조작하는 데 필수적인 도구가 되었습니다. 그러나 디스플레이 속성을 조정하는 것만으로는 충분하지 않거나 바람직하지 않은 시나리오가 있을 수 있습니다. 이러한 요구를 해결하기 위해 가시성 속성을 대상으로 하는 사용자 정의 jQuery 함수를 생성할 수 있습니다.

사용자 정의 가시성 함수 생성

가시성을 대상으로 하는 사용자 정의 함수를 생성하려면 .css() 메소드를 활용할 수 있습니다. 다음 예에서는 가시성을 숨기고 표시하고 전환하는 함수를 정의하는 방법을 보여줍니다.

jQuery.fn.visible = function() {
  return this.css('visibility', 'visible');
};

jQuery.fn.invisible = function() {
  return this.css('visibility', 'hidden');
};

jQuery.fn.visibilityToggle = function() {
  return this.css('visibility', function(i, visibility) {
    return (visibility == 'visible') ? 'hidden' : 'visible';
  });
};

toggle() 함수 오버로드

기존의 Toggle() 함수가 선호되므로 가시성을 처리하기 위해 이를 오버로드할 수 있습니다.

!(function($) {
  var toggle = $.fn.toggle;
  $.fn.toggle = function() {
    var args = $.makeArray(arguments),
      lastArg = args.pop();

    if (lastArg == 'visibility') {
      return this.visibilityToggle();
    }

    return toggle.apply(this, arguments);
  };
})(jQuery);

이러한 사용자 정의 함수를 사용하거나 오버로딩 기술을 사용하면 이제 CSS 표시 설정을 사용하지 않고도 친숙한 jQuery 구문을 사용하여 요소 가시성을 쉽게 관리할 수 있습니다.

위 내용은 `.hide()` 및 `.show()` 이외의 jQuery에서 요소 가시성을 어떻게 제어할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!