jQuery 확장 (텍스트 토글 확장)

jQuery 확장이란?

jQuery는 jQuery가 기본으로 제공하는 기능 필요할 경우 다른 개발자가 만들어 놓은 기능을 확장해서 사용할 수 있다.

 

html

<button id="toggleButton" data-alt="숨겨진 텍스트입니다.">텍스트 토글</button>

javaScript

(function($) {
    $.fn.toggleText = function() { //jQuery확장 메서드(extension method)를 정의
    //$.fn(jQuery의 프로토타입 객체) 제이쿼리 객체에 새로운 동작을 추가하는 것을 의미 .toggleText(사용자 정의 메서드 이름)

        return this.each(function() {
            var $this = $(this);
            var originalText = $this.text();
            var altText = $this.data('alt'); //data 속성을 가져온다.
            $this.on('click', function() {
                var currentText = $this.text();
                var newText = currentText === originalText ? altText : originalText;
                $this.text(newText);
            });
        });
    };
})(jQuery);

$(document).ready(function() {
    $('#toggleButton').toggleText();
});

위 와 같이 toggleText 함수를 정의하고 해당 함수를 호출한 html태그 요소를 선택하는 jQuery 플러그인을 만든다.