목차
- toggle() 예제 - 클릭 시 색깔 토글.
- toggle() 정의
- toggle() 구문
- 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>
결과보기