จากตัวอย่างที่เเล้ว เป็นตัวอย่างการใช้งาน toggle(); ซึ่งก็จะมีข้อเเตกต่างระหว่าง toggle(); กับ show(); เเละ hide(); สามารถดูเปรียบเทียบการใช้งานได้จากตัวอย่างนี้ค่ะ
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //เมื่อโหลดหน้าเพจให้คำสั่งนี้พร้อมใช้งานทันที่
var form = document.getElementById("frm") // รูปแบบ ประกาศตัวแปรที่ เอา id ของ form มา
$(form).hide(); //ในครั้งเเรกที่เปิดหน้านี้มา เราจะให้ form ถูกซ่อนไว้ก่อน โดยใช้คำสั่ง hide
$("button").click(function(){ // button คือ เเท็ก ที่เราจะให้เป็น ปุ่มเพื่อกด เเสดงผลของที่เราซ่อน เมื่อ click จะเรียกใช้งาน function
$(form).
(function(){ //เมื่อทำการคลิกก็จะทำการ show (เเละid ที่เราส่งมาเป็นตัวแปรform)
$("button").hide();//จากนั้น ก็ให้ปิด ไม่ให้มี ปุ่ม
});
});
});
</script>
</head>
<body>
<form action="index.php" id="frm">
<input type="text" name="input_name">
<input type="text" name="input_name">
<input type="submit" name="submit" >
</form>
<button>Toggle</button>
</body>
</html>
ครั้งเเรกของการ Run ไฟล์ตัวอย่างจะให้ทำการปิดการแสดงผลของ form ไว้ก่อน
- 2015-01-18_11-29-35.png (70.27 KiB) Viewed 1860 times
- 2015-01-18_11-29-19.png (70.2 KiB) Viewed 1860 times