MW211 EXIT

devlog
jQuery/.data()(2)
2018年09月24日
値の設定方法は以下の通り。第二引数に指定してあげればよい。(「.attr()」と同じ)
┌──────────────────────────────────────┐
│$(function(){                                                               │
│    $(':button').on('click', function() {                                   │
│        $(this).data('key', '新しい値');                                    │
│        alert($(this).data('key'));  //→「新しい値」                       │
│    });                                                                     │
│});                                                                         │
├──────────────────────────────────────┤
│<input type="button" value="表示" data-key="古い値"/>                       │
└──────────────────────────────────────┘

但し、「.data()」によるデータの設定の反映はjQuery上のみで
HTML上には反映されないので、「.attr()」では取得できないので注意。
┌──────────────────────────────────────┐
│$(function(){                                                               │
│    $(':button').on('click', function() {                                   │
│        $(this).data('key', '新しい値');                                    │
│        alert($(this).data('key'));       //→「新しい値」                  │
│        alert($(this).attr('data-key'));  //→「古い値」  ★                │
│    });                                                                     │
│});                                                                         │
├──────────────────────────────────────┤
│<input type="button" value="表示" data-key="古い値"/>                       │
└──────────────────────────────────────┘

逆に「.attr()」でHTML上に反映させれば、「.data()」でも取得できる。
┌──────────────────────────────────────┐
│$(function(){                                                               │
│    $(':button').on('click', function() {                                   │
│        $(this).attr('data-key', '新しい値');                               │
│        alert($(this).data('key'));       //→「新しい値」★                │
│        alert($(this).attr('data-key'));  //→「新しい値」                  │
│    });                                                                     │
│});                                                                         │
├──────────────────────────────────────┤
│<input type="button" value="表示" data-key="古い値"/>                       │
└──────────────────────────────────────┘
分類:jQuery