jQuery ซ่อน แสดง ข้อมูล ด้วยคำสั่ง hide และ show

สอนเขียนโค้ด jQuery ซ่อน แสดง ข้อมูล โดยใช้คำสั่ง hide สำหรับซ่อนข้อมูล และคำสั่ง show สำหรับแสดงข้อมูล โดยตัวอย่างจะอ้างถึงข้อมูลผ่าน attribute id โดยจะทำงานตามที่ผู้ใช้งานเลือกซ่อน หรือแสดงข้อมูล สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery ซ่อน แสดง ข้อมูล ด้วยคำสั่ง hide และ show

<div id="message">jQuery ซ่อน แสดง ข้อมูล</div>
<br/>
<a href="javascript:showOrHideDiv('none');">ซ่อนข้อมูล</a> | <a href="javascript:showOrHideDiv('block');">แสดงข้อมูล</a>

<script>
    function showOrHideDiv( display ) {
        var e = $("#message");
        ( display == "none" ) ? e.hide() : e.show();
    }
</script>

1. ฟังก์ชัน showOrHideDiv รับค่า display โดยถ้าผู้ใช้งานคลิกซ่อนข้อมูล จะส่งค่า none แต่ถ้าผู้ใช้งานคลิกแสดงข้อมูล จะส่งค่า block

2. อ้างถึง id = message ของ div ที่เก็บข้อมูลด้วย $("#message") และเก็บไว้ที่ตัวแปร e

3. ใช้ if แบบย่อ คือ ถ้าตัวแปร display มีค่าเท่ากับ none ให้ซ่อนข้อมูลด้วย e.hide กลับกันถ้าไม่ใช้ none ให้แสดงข้อมูลด้วย e.show