HTML数据属性可以't由Jquery更新

HTML Data Attribute Can't Be Updated By Jquery

本文关键字：Jquery 更新 数据属性 HTML      更新时间：2023-09-26

我有这个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值。而不是CCD_ 4。非常感谢。

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

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

您不需要使用.attr()，只需在读取和写入paging数据时使用.data()即可

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