javascript - 无法使用javascript或jQuery获取div中数据集的更新值

我正在进行一些Java脚本更改，以更新div数据属性值。以下是详细说明。

我有一个带有一些数据属性的div，最初在页面加载时它们被设置为一些默认值。

<div class="offer_option" id="offerView" data-term="24" data-rc="54.99">
   <a href="#" class="customize_offer" id="customize">Select</a>
</div>

通过Ajax调用，我尝试如下更新“ data-rc”值。

document.getElementById("offerView").dataset.rc = 100.00;

要么

$("#offerView").data('rc', 100.00);

当我单击“选择”链接时，将执行以下代码

$('.customize_offer').unbind('click').click(function() {
    selectOffer($(this));
});

下面是“ selectOffer”功能

function selectOffer(selectButton) {
   var offerOption = selectButton.parents('.offer_option');
   var offerDetails = offerOption.data();
   console.log( offerDetails );
}

问题是数据集没有在“ offerDetails”变量中显示data-rc的更新值，而是显示了一个空值。我尝试使用一些j查询选项和Java脚本选项，但是无法在“ offerDetails”变量中获取更新的值。请让我知道如何解决此问题。

谢谢，
那根德拉

最佳答案

尝试

$("#offerView").attr('data-rc', 100.00);

为什么会发生？

首先使用jQuery内部的特殊缓存对象来存储jQuery .data()的数据属性值，但不会更改DOM中的属性。要更改属性，必须使用attr()