제이쿼리에 있는 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