[Event] JQ - toggle() 메서드 - JQ 1.9 폐기완료. / 여러 클릭 이벤트간 상호전환. (= toggle메서드 = 토글 메서드)

1. toggle() 예제 - 클릭 시 색깔 토글.
2. toggle() 정의
3. toggle() 구문
4. toggle() 예제 - 여러 함수간 토글.

toggle() 예제 - 클릭 시 색깔 토글.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("p").toggle(

    function(){$("p").css({"color": "red"});},

    function(){$("p").css({"color": "blue"});},

    function(){$("p").css({"color": "green"});

  });

});

</script>

<p style="font-size:40px">홈짱닷컴 Homzzang.com</p>

 

toggle() 정의

 

클릭 이벤트에 여러 함수 연결해, 클릭 때마다 함수를 순서대로 교대 실행.

 

---

 

1.

jQuery 1.8 - 폐기예고.

jQuery 1.9 - 폐기완료.

 

2.

요소 클릭 때마다 다른 함수가 교대로 실행됨.

 

3.

매개변수에 따라 Effect용 toggle() 메서드가 호출될 수도 있음.

 

toggle() 구문

 

$(selector).toggle(function)

 

---

[매개변수]

 

function

필수. 요소 클릭 이벤트 발생 시 순서대로 교대 실행할 함수 지정.

 

toggle() 예제 - 여러 함수간 토글.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("li").toggle(

    function(){$(this).css({"color": "red"});},

    function(){$(this).css({"color": "blue"});},

    function(){$(this).css({"color": "green"});},

    function(){$(this).css({"color": "magenta"});

  });

});

</script>

<ul>

  <li>홈짱닷컴 Homzzang.com</li>

  <li>그누보드/영카트 강의.</li>

</ul>

 

결과보기