javascript - HTML 中的数据值不会改变

Question

我一定是误解了，但我认为调用 jQuery .data() 函数时 HTML 元素的数据值会发生变化:

<div id="empty_column_0" data-name="empty_column_0" class="settings_toggle toggle-success inline-toggle" data-target="column_0" data-value="0"></div>

当我“切换”此元素时，数据值必须从 0 更改为 1，反之亦然。

我这样做:

$('.settings_toggle').on('toggle', function (e, active) 
{
    var that = $(e.target);  
    //Change the data value of the element
    if(active) {var bool = 1;} else {var bool = 0;}
    that.data('value', bool);
    console.log(that.data('value'));
});

控制台中的值发生变化，但 HTML 中的值没有变化？这是它应该如何工作的吗？

Answer 1

这是设计使然。 jQuery data() 不会更新 data- HTML 属性。如果您希望更新 HTML 属性，则需要使用:

that.attr('data-value', bool);