再以前Javascript的時候，我們要設定當滑鼠按第一次按下，會顯示某個東西。當滑鼠按下第二次，會把他隱藏起來。要做上述的動作要寫很繁瑣的程式碼。還要加上一個flag去紀錄現在是要處理第一次，還是第二次。
不過現在JQuery方便很多，不用在寫的一長篇，而且延展性也變的很好。
公式：
|
.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject)] )
|
上面公式的handler(eventObject)，可以兩個或是更多。當你按下滑鼠第一次，就會執行第一個handler，案第二次就會執行第二個，依此類推。當你全部都跑過一次，他就會循環回第一個。
這樣說可能不清楚，我依照慣例還是會寫個範例來說明一下。
|
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready( function() {
$('#myDIV').toggle(
function(){
$(this).css({"color":"red"});
},
function(){
$(this).css({"color":"blue"});
}
);
})
</script>
</head>
<body>
<div id="myDIV">Hello jQuery</div>
</body>
</html>
|
在上面這個範例，當你在Hello jQuery按下第一次滑鼠左鍵，文字會變紅色，第二次會變成藍色。
下面我在放個範例。這樣我想你應該就會完全瞭解了。
|
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready( function() {
$('#myDIV').toggle(
function(){
$(this).css({"color":"red"});
},
function(){
$(this).css({"color":"blue"});
},
function(){
$(this).css({"color":"yellow"});
},
function(){
$(this).css({"color":"lightgreen"});
},
function(){
$(this).css({"color":"black"});
}
})
</script>
</head>
<body>
<div id="myDIV">Hello jQuery</div>
</body>
</html>
|
這邊我總共在.toggle()裡面放了五個handler，所以呢當你每按一下，他會依序變成 紅->藍->黃->淡綠->黑。依序循環。
這個東西要怎麼弄。那就要看每個人的想像力。跟其他功能搭在一起，就可以有無限的可能。
留言列表
