ajax调用后更新数据属性

Updating data attribute after ajax call

本文关键字：数据属性 更新 调用 ajax      更新时间：2023-09-26

我有一个页面，其中列出了一些工作，每个工作有一个按钮支付，按钮有一个数据支付属性，其中包含是否支付的值。

当按钮被点击时，我向我的路由发送一个请求，该请求更新支付并返回成功以及是否支付的状态。

看我的按钮。

<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属性。

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

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>

。数据和数据属性是不同的。如果你想更新属性，可以这样做:

$('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);
        });
});
相关文章：