近期在維護舊版本 JQuery 為主的網站內，遇上要在不同的 JQuery 物件中傳遞一些從 ajax 或是使用者選取的資料。這時 JQuery 中內建的 .data() 方法就是一個相當方便的儲存位置。不過要注意的是：若你是要取用 html 標籤上的 data-* ，那麼 * 中所有的大寫值都會強制轉換成小寫。若你是自己寫入 .data() 內的 key-value 就沒有這個限制。
程式碼
以下列 jQuery UI Dialog 為例子，在按下 Add 按鈕時，先在$(‘#edit-tag-dialog’)中加入自訂的 key-value，這樣就可以在 callback 函式中取出。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!-- use jQuery UI Dialog--> <div id="edit-tag-dialog" title="Edit Tag"> <span>This is Edit Tag Dialog.</span> </div> <button id="addBtn">Add</button> <script> (function($) { const editTagsDialog = $('#edit-tag-dialog').dialog({ autoOpen: false, resizable: false, draggable: false, height: 'auto', width: '200px', modal: true, dialogClass: 'fixed-dialog', buttons: [ { text: 'Update', class: 'btn btn-info', click: async function () { try { console.log('update ready!', $(this).data('savedStr')) // print "This is String." } catch (err) { console.log(err) } }, }, { text: 'Close', class: 'btn btn-primary', click: function () { $(this).dialog('close') }, }, ], }) $('#addBtn').on('click', function(){ $('#edit-tag-dialog').data('savedStr', 'This is String.').dialog('open') }) })(jQuery) </script> |
參考資料
1. Passing data to a jQuery UI Dialog
2. jQuery .data()與.attr()筆記兩則
3. JQuery – html tag 的資料屬性取得(data-)
4. [技術分享] 什麼是 HTML 5 中的資料屬性（data-* attribute）
