jQuery กับคำสั่ง “data” เอาไว้ทำไรน้อ?
เอาล่ะๆ มาแล้ว หลังจากได้รับ e-mail จำนวนนึง ไปบ่น ว่า “ทำไมไม่อัพเดทเลย” บางคนเขียนมาสอบถามอาการนึกว่าผมป่วยด้วยซ้ำ 555++ ก็เลย คิดว่าจะมาอัพเดท สักบทความนึง
จริงๆ ช่วงนี้ก็ยังไม่ค่อยว่างนักหรอก แต่ กลัวคนจะคิดว่า หายไปไหน จะทิ้งเว็บนี้เหรอ ก็เลยคิดว่า มาอัพเดทสักหน่อย ดีกว่า
สำหรับเรื่องที่จะมาบ่นวันนี้ เป็นคำสั่งนึงใน jQuery ครับ ซึ่งผมคิดว่ามันมีประโยชน์ดี คำสั่งนั้นคือ “data” นั่นเองครับ ปกติเวลาเราจะทำค่า hidden หรือฝากค่าไปกับตัวแปร javascript ที่เป็นลักษณะชั่วคราว เก็บไว้เปรัยบเทียบอ้างอิง ก็มักจะเขียนเช่น
-
$(‘#enter’).click(function() {
-
$(‘input:hidden’).val(’ssss’);
-
});
หรือ
-
<a href="javascript:store(‘value’)">Store my value</a>
แล้วเอาไป push ลง array หรือ new variable ใหม่มาเพื่อเก็บไว้
หรือบางคนอาาจจะเอาไปฝากไว้กับ id, class, rel อะไรก็ตามแต่เหอะ มันทำให้โคดดูเลอะเทอะมากเลยทีเดียว
แต่ถ้ามาลองใช้ data เนี่ย มันจะสะดวกกว่ามาก และเก็บค่าได้หลายแบบทั้ง string, object, array คือเรียกว่าเกือบจะเหมือน memcached เลย
เอาล่ะมาลองดูวิธีการทำงานของมันกัน ง่ายมาก!!!
อาทิเช่น ผมต้องการทิ้งค่าอะไรสักอย่างไว้ใน DOM ผมก็จะเขียนแค่ว่า
-
$(‘#somewhereclick’).click(function() {
-
var old_value = $(this).data(‘count’);
-
alert(‘before is ‘ + old_value);
-
$(this).data(‘count’, old_value + 1);
-
after(‘after is ‘ + $(this).data(‘count’);
-
});
เท่านี้เองครับ ง่ายๆ สบายๆ
ลองไปดูตัวอย่างของเว็บนี้ดูครับ
http://www.bennadel.com/blog/1404-jQuery-Data-Method-Associates-Data-With-DOM-Elements-SWEET-ASS-SWEET-.htm
จะเห็นว่าเค้าเอา properties มาเก็บไว้ใน data ทั้งหมด โดยไม่จำเป็นต้องเอาไปเก็บไว้ในค่า hidden หรือ หรือฝังไว้กับ class, id, rel แต่อย่างใด
เอาล่ะครับ วันนี้ก็มาเขียนให้หายคิดถึงกันแค่นี้ก่อนละกัน เจอกันโอกานหน้าครับ
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
ผมไม่ได้เข้า jquerytips มา 3 เดือนได้
วันนี้รู้สึกวูบ ๆ เหมือนมีอะไรมาบอกให้เข้ามาดู
ป๊าดดดด เจอบทความใหม่พอดี
ขอบคุณที่มา update นะครับ ฝาก data ไว้ใน dom ดูดีทีเดียว
เดี๋ยวลองเอาไปศึกษาดูก่อนครับ
เฝ้ารอมานานแสนนาน ท่านกลับมาอีกครั้ง เหมือนได้เจอสหายเก่าที่ห่างหายกันไปนาน คิดถึงท่านอยู่เสมอ
วันก่อนถึงขนาดไปตามหาตัวกันถึง ไทยเสียว
ท่านครับแฟนานุแฟนเฝ้าการกลับมาของท่านอยู่ อย่าปลีกวิเวก นานนัก
เขียนบทความได้ดีมากเลยครับ ขอบคุณครับ
ขอบคุณสำหรับเทคนิคต่างๆ ครับ
ปกติก็ใช้อย่างที่ว่าจริงๆ ใส่ Hidden Input ไว้ ^^’
เห็นแบบนี้แล้วคงต้องเปลี่ยนเป็น $(‘#elementId’).data ซะแล้ว
ผมยังเป็นกำลังใจให้นะครับ