jQuery动态更新数据键和值

jQuery dynamically update data keys & values

本文关键字：键和值 数据 更新 动态 jQuery      更新时间：2023-09-26

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

<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"

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

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

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

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

示例小提琴

相关文章：