javascript - jQuery 动态更新数据键和值

Question

我正在尝试创建一个从元素动态获取所有数据属性的函数。例如:

<button id="button" data-key1="title" data-key2="content">Button 1</button>
<button id="changeButtonData">Change data for button 1</button>

$(document).on('click', '#button', function(e){
    e.preventDefault();
    $buttonData = $(this).data();
    console.log($buttonData);
}

$(document).on('click', '#changeButtonData', function(e){
    e.preventDefault();
    //edit existing data-keys value
    $('#button').data('data-key1', 'newtitle');
    //store new data-key on element
    $('#button').data('data-key3', 'new');
}

问题是，如果我单击第一个按钮并检查控制台日志，它将显示 data-key1="title" 和 data-key2="content"

如果我随后单击第二个按钮，然后再次单击第一个按钮以再次触发控制台日志记录，它将不会显示新的替换数据属性或新的数据标签。

有人知道如何解决这个问题吗？

Answer 1

问题是因为当您设置 data 属性时，您应该省略 data- 前缀，例如: $('#button').data( 'key3'，'新')；。试试这个:

$(document).on('click', '#changeButtonData', function (e) {
    e.preventDefault();
    $('#button').data({
        'key1': 'newtitle',
        'key3': 'new'
    });
});

Example fiddle