toggle
원문 링크 
http://api.jquery.com/toggle/
개요 : 조건에 일치하는 요소에 클릭 때 실행될 하나 이상의 핸들러를 바인딩합니다.
- .toggle( handler(eventObject), handler(eventObject) [, handler(eventObject)] )
- handler(eventObject) 요소 클릭 짝수번째에 실행될 기능
- handler(eventObject) 요소 클릭 홀수번째에 실행될 기능
- handler(eventObject) ) 이 인자도 추가되면 토글의 순환이 3번 클릭에 한번씩으로 증가합니다.
.toggle() 함수는 click 이벤트에 핸들러를 바인딩하고, click 때마다 실행될 기능도 처리할 수 있게 해줍니다.
예를 보시면 쉽습니다.
<div id="target"> Click here </div>
이벤트 핸들러를 위 이미지에 나타난 <div> 요소에 바인딩 해보겠습니다.
$('#target').toggle(function() {
alert('First handler for .toggle() called.');
}, function() {
alert('Second handler for .toggle() called.');
});바인딩 된 요소를 반복적으로 클릭해보면 아래와 같은 메시지가 알림창으로 반복적으로 나타나게 됩니다.
First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.
2개 이상의 핸들러를 제공했다면, .toggle() 함수는 그 핸들러를 번갈아가며 실행시켜 줍니다. 예를 들어, 만일 핸들러를 3개를 바인딩했다면, 첫번째 클릭에 첫번째 기능이 실행되고, 그 이후에는 4번째 클릭 때, 일곱번째 클릭 때 처음 핸들러가 실행되게 됩니다.
.toggle() 함수는 편리합니다.(또는 그렇다고 주장합니다. ^^;;) 반복적으로 동일한 동작을 구현하는데 비교적 간단합니다. 단, .toggle() 함수가 가진 한계를 인정한다는 조건안에서 말입니다. (군.. 군대용어가;;;) 예를 들어, .toggle() 함수를 동일한 요소에 두 번 적용하는 경우 올바른 동작을 보장 받지 못합니다. .toggle() 함수는 내부적으로 click 핸들러와 같이 사용되기 때문에, .toggle() 함수의 바인딩을 해제하려면 click 을 바인딩 해제해야 합니다. 그래서 click 핸들러의 다른 기능에 영향을 줄수도 있게 되는 것입니다. 이벤트가 발생했던 요소가 .toggle() 함수를 호출하고 있었다면 바인딩을 해제하면 .preventDefault() 가 실행되기 때문에, 링크 기능이 사라지거나 버튼의 클릭 기능에 문제가 발생할 수도 있습니다.
음, 부가 설명을 드리자면 이 함수는 바인딩을 해제할 때 주의해야 한다는 거네요. click에 물린 다른 기능들이 같이 바인딩 해제될 수도 있으니까요.
예 제
리스트 아이템을 클릭해서 토글을 구현합니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin:10px; list-style:inside circle; font-weight:bold; }
li { cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
<script>
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
</script>
</body>
</html>미리보기
클릭해 보세요. 세가지 스타일이 순환되면서 실행됩니다.
예 제
테이블 셀에 특정 스타일을 토글합니다.
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
jQuery의 힘은 이 toggle() 함수에서 가장 많이 느끼게 됩니다. 토글을 구현하려면 귀찮은 작업이 엄청 많죠. 아주 좋은 함수라고 주장합니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| undelegate(), 바인딩 해제하기 (0) | 2012.03.20 |
|---|---|
| unbind(), 바인딩 해제하기 (0) | 2012.03.20 |
| triggerHandler(), 하나의 함수만 실행시키기 (0) | 2012.03.20 |
| trigger(), 함수 실행시키기 (0) | 2012.03.20 |
| submit(), 폼 전송 이벤트 (1) | 2012.03.09 |
| select(), 텍스트 드래그 이벤트 (2) | 2012.03.09 |
| scroll(), 스크롤 이벤트 (3) | 2012.03.06 |
| resize(), 사이즈 바꾸기 (0) | 2012.03.06 |