웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

toggleAttr 플러그인 만들기

Last Modified : 2016-07-21 / Created : 2016-07-21
4,122
View Count
제이쿼리에 있는 toggleClass() 메소드를 사용하면 편리하게 클래스명을 제어할 수 있습니다. 간단한 온오프 기능을 제공하죠. 하지만 속성(Attribute)을 간단하게 토글방식으로 제어할 수 있다면 이 역시 매우 편리할 것입니다. 하지만 이처럼 쉽게 제어가 가능한 toggleAttr()이 제이쿼리에는 없는데요... 그래서 플러그인(plug-in)으로 간단하게 만들어 사용하고자 합니다.

먼저 toggleAttr()은 제이쿼리(jQuery) 플러그인으로 아래는 플러그인 소스코드입니다.


! toggleAttr() 플러그인 만들기

이 toggleAttr()은 인자로 속성명을 넘겨줄 경우 해당하는 속성명 또는 속성값을 지정할 수 있으며 만약 속성이 이미 지정된 경우 제거하게 됩니다. 그럼 아래 소스를 봐주세요.

<script type="text/javascript">
/*
 toggleAttr() Plug-in v1.0
 - Toggle name of attribute
 - element.toggleAttr('checked')
 - 2 parameters : name, value
*/

(function($) {
   $.fn.toggleAttr = function(name, value) {
      // Set variables up
      var attrName = name;
      var attrValue = value || '';

      if (this.is('[' + attrName + ']')) {
         this.removeAttr(attrName);
      } else {
         this.attr(attrName, attrValue);
      }
      return this;
   }
})(jquery);
</script>

이처럼 간단하게 코드작성이 완료되었습니다. 해당 플러그인을 사용한 예제소스를 하나 만들어보도록 하겠습니다. 아래를 봐주세요.

<span>Price</span>

<script>
$("span").toggleAttr("data-price", "1000");
</script>
위 코드를 실행하면 span 태그에 data-price 속성이 추가되며 1000의값을 가지게 됩니다. 만약 한번 더 실행할 경우 기존의 data-price 속성은 제거될 것입니다.

다운로드는 아래 링크에서 받아 사용하실 수도 있습니다.

*toggleAttr 플러그인 다운받기
http://webisfree.com/downloads/toggleattr_v1.js

Previous

ajaxStart() ajaxStop() 사용방법 및 예제보기

Previous

[자바스크립트] 숫자 타입값에 콤마 추가하는 방법