我有一个页面列出了许多工作,每个工作都有一个付费按钮,按钮有一个数据付费属性,其中包含是否支付的价值。
当点击该按钮时,我向我的路线发送请求,该请求更新付款并返回成功以及是否已付款的状态。
看我的按钮。
<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的按钮更新数据付费属性。
我认为函数会这样做,但它不会更新页面加载时它保留的值。
答案 0 :(得分:4)
data
不是data-*
属性的访问者,它的内容越来越少。 data
管理jQuery的数据缓存,该数据缓存仅来自data-*
属性的初始化。它永远不会写给他们。
要实际更改属性值,请使用attr
,而不是数据:
$(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'));
&#13;
<div id="target" data-foo="bar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
答案 1 :(得分: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);
});
});