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 ，而不要使用data：

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

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

不利的一面是，如果您不需要data提供的其他功能，只需使用attr 。

例：

 // 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')); 

 <div id="target" data-foo="bar"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

.data和数据属性不同。 如果要更新属性，请执行以下操作：

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

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

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

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

              console.log(data.jh.paid);

        });

});