.toggleClass() 함수는 특정한 클래스의 추가/제거를 한번에 처리할 수 있습니다.
원문 링크 
http://api.jquery.com/toggleClass/
개요 : 선택자에 의해 선택된 요소 집합에 클래스를 설정/제거 할수 있습니다. 클래스를 변경할 조건을 설정할 수도 있습니다.
- .toggleClass( className )
- className 선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명
- .toggleClass( className, switch )
- className 선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명
- switch 클래스가 추가되거나 삭제될 조건문
- .toggleClass( function(index, class), [ switch ] )
- function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다.
- switch 클래스가 추가되거나 삭제될 조건문
이 함수는 하나 이상의 클래스명을 인자로 가질 수 있습니다. 이 함수가 맨 처음 실행되었을 때 해당 요소에 함수에 할당된 클래스명 인자가 이미 들어가 있다면 클래스가 제거되는 것부터 시작됩니다. 반대로 인자로 주어진 클래스가 없다면 추가가 되겠죠. 아래 예제는 div 태그에 간단하게 .toggleClass()를 적용해 본 것입니다.
이 html에 $('div.tumble').toggleClass('bounce') 스크립트를 적용시키면, 아래와 같습니다. :
그 다음으로 $('div.tumble').toggleClass('bounce') 스크립트가 한번 더 실행되면 div 태그의 클래스는 원래대로 tumble 만 남게됩니다.
같은 div 태그에 .toggleClass('bounce spin') 과 같은 클래스명이 2개인 인자를 가진 함수를 실행시키면, <div class="tumble bounce spin"> 과 <div class="tumble"> 가 반복되게 됩니다.
switch 인자가 있는 2번째 함수는 switch 인자에 따라 해당 클래스가 실행이 되거나 되지 않거나 하게 됩니다. 제일 아래 예제를 보시면 간단한 걸 아실 수 있습니다. 단순하게 말씀드리면 이 switch 인자가 true 가 되면 토글된다고 생각하시면 됩니다. 무지 쉽습니다. 아래 예제를 보시면 말이죠. jquery.com 의 설명은 만약 조건이 true면 클래스가 추가되고 false면 클래스가 제거된다고 합니다. 참고하셔야 겠네요.
위 스크립트를 풀어쓰면 아래와 같습니다.
if (addOrRemove) {
$('#foo').addClass(className);
}
else {
$('#foo').removeClass(className);
}
jQuery 1.4 버젼부터는 인자로 함수를 사용할 수 있게 되었다네요. 그 함수는 클래스명을 반환시킬 수 있게 구성하면 됩니다. 당연하겠죠. 첫번째 인자는 클래스명이어야 할테니까요.
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar')) {
return 'happy';
} else {
return 'sad';
}
});내용은 복잡해 보이지만 실제로는 div태그를 감싸고 있는 부모 태그의 클래스명이 bar이면 'happy'라는 문자열을 아니면 'sad'라는 문자열을 반환하는 스크립트 입니다. 반환되는 문자열이 바로 토글될 클래스명이 되는 것이지요.
예 제
p 태그들에 'highlight' 라는 클래스를 토글하는 스크립트입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>미리보기
p 태그 영역을 클릭해 보세요. 노란색 배경이 토글되는걸 보실 수 있습니다. 아하하 재밌네요.
예 제
이번에는 3의 배수째 클릭되면 'highlight'클래스를 토글하는 스크립트입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:red; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
<p class="blue">on these (<span>clicks: 0</span>)</p>
<p class="blue">paragraphs (<span>clicks: 0</span>)</p>
<script>
var count = 0;
$("p").each(function() {
var $thisParagraph = $(this);
var count = 0;
$thisParagraph.click(function() {
count++;
$thisParagraph.find("span").text('clicks: ' + count);
$thisParagraph.toggleClass("highlight", count % 3 == 0);
});
});
</script>
</body>
</html>미리보기
텍스트를 클릭해보세요. 숫자가 증가되면서 3의 배수가 되는 순간 노란색 바탕이 나타나는 것을 보실 수 있습니다. switch에 해당하는 count % 3 == 0 부분을 잠시 설명드리자면 클릭 때마다 1씩 증가하는 count 를 3으로 나눈 몫이 0이 되는 순간 true가 되면서 'highlight' 클래스가 토글되는 것입니다.
특정한 이벤트 시에만 토글하려면 2번째 방법을 응용해서 사용할 수 있겠네요. 얼마나 복잡한 조건을 줄 수 있을지는 더 연구해 보아야 겠습니다.
이번 .toggleClass는 .addClass와 .removeClass를 사용하는데 불편하지 말라고 만들어 준것 같습니다. 실제로도 웹환경에서 많이 사용될 함수인 것 같아요. 와우 재밌습니다.ㅎㅎ
그럼 즐프하세요.
.※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 자식 요소들 찾기, children() (2) | 2011.04.07 |
|---|---|
| jQuery API 정복 - 선택된 요소들 이어 붙이기, andSelf() (6) | 2011.03.24 |
| jQuery API 정복 - 선택요소 확장하기, add() (2) | 2011.03.21 |
| jQuery API 정복 - 폼의 value 가져오기, val() (4) | 2011.03.17 |
| jQuery API 정복 - 클래스 제거, removeClass() (2) | 2011.03.14 |
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.03.11 |
| jquery API 정복 - innerHTML 과 같은 표현, html() (10) | 2011.03.10 |
| jQuery API 정복 - 클래스가 있나 찾기, hasClass() (5) | 2011.03.03 |