Jquery

Question

我有这个HTML按钮：

<div class="row">
    <div class="col-md-6">
        <a id="TopBiggestCommissionButton" href="#" 
           class="btn btn-danger btn-sm" data-paging="0">More</a>
    </div>
</div>

我有这个jquery来更新data-paging属性：

$( "#TopBiggestCommissionButton" ).click(function (e) {
    e.preventDefault();
    var paging = $(this).attr("data-paging");
    paging = parseInt(paging) + parseInt(10);
    alert (paging); //--- THIS PRODUCE 10 as result
    $(this).data("paging", paging); //--- but this isn't working
});

当我查看源代码时，为什么我仍然有0作为data-paging值。不是10。谢谢。

Answer 1

.data()使用内部缓存来存储信息，它不会更新属性。如果您要更新属性使用.attr()

$(this).attr("data-paging", paging); 

在阅读和撰写.attr()数据时，您不需要.data()使用paging

$( "#TopBiggestCommissionButton" ).click(function (e) {
    e.preventDefault();
    var paging = $(this).data("paging");
    paging += 10;
    alert (paging); 
    $(this).data("paging", paging); 
});