ajax调用后更新数据属性

Question

我有一个页面列出了许多工作，每个工作都有一个付费按钮，该按钮有一个 data-paid 属性，其中包含是否付费的值。

单击按钮时，我向我的路由发送请求，该请求更新付款并返回成功以及是否已付款的状态。

看我的按钮。

<button data-id="{{ $r->id }}" data-paid="{{ $r->paid }}" class="btn btn-success btn-sm paid">Paid</button>

单击时

$('button.paid').on('click', function() {

        var job = this;
        var id =  $(this).data("id");

        $.get('/round/job/' + id + '/paid', function(data){

              $(job).data('paid',data.jh.paid);

              console.log(data.jh.paid);

        });

});

查看控制台时，如果已付费，则路由返回 1，如果未付费，则返回 0。

我想用 1 或 0 的值更新按钮的 data-paid 属性。

我认为函数会这样做，但它不会更新它在加载页面时保留的值。

Answer 1

data不是data-*属性的访问器，它比这多也少。data管理的元素，这是唯一的jQuery的数据缓存初始化从data-*属性。它从不写信给他们。

要实际更改属性值，请使用attr，而不是数据：

$(job).attr("data-paid", dta.jh.paid);

当然，如果您data在整个代码中使用，并且除了作为起点之外不关心实际的属性值，那data很好，只是不要期望在更改数据值时属性值会发生变化。

另一方面是，如果您不需要data提供的附加功能，只需使用attr.

例子：

$(job).attr("data-paid", dta.jh.paid);

// Get the element
var t = $("#target");

// See what its data value for "foo" is
console.log("Before: t.data('foo') = " + t.data('foo'));

// See what its *attribute* is
console.log("Before: t.attr('data-foo') = " + t.attr('data-foo'));

// Change it
t.data('foo', 'updated');

// See what its data value for "foo" is again
console.log("After:  t.data('foo') = " + t.data('foo'));

// See what its *attribute* is again:
console.log("After:  t.attr('data-foo') = " + t.attr('data-foo'));