如何在jQuery中保留data属性原始值以计算正确月度费用

我有一个带数量输入框的服务选项卡片，数量变化时会更新元素的data-monthly属性。但现在每次计算都会用更新后的属性值而非原始值，导致结果错误——比如初始值10，点击+按钮后console输出是10→20→60→240，这是因为每次都用新的data-monthly值乘以数量。我需要始终用原始的data-monthly值计算，得到10→20→30→40的结果，且不能硬编码数值，因为不同卡片的原始值不同。

解决方案 #

核心问题是你在每次计算后覆盖了data-monthly的原始值，所以需要保留原始的月度费用值，不要修改它。以下是两种可行方案：

方案1：新增专属data属性存储原始值 #

在HTML中给卡片添加一个专门存储原始月度费用的属性，后续计算始终基于这个值：

修改后的HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="service-option-card" data-monthly="10" data-original-monthly="10">
  <input style="display: none;" class="price" value="50">                                           
  <p class="option-price">$50</p>
  <div class="quantity">
    <button class="btn btn-quantity dec">-</button>
    <input class="quantity-input quantity" value="1">
    <button class="btn btn-quantity inc">+</button>
  </div>
</div>

<div class="col-md-6 services-total-side">  
  <div class="calculated-totals">
    <p class="cost-title">Monthly Cost:</p>
    <p class="monthly-cost">$0</p>
  </div>
</div>

修改后的关键JavaScript代码

在updatePrice函数中，改用data-original-monthly获取原始值，data-monthly仅存储计算后的结果：

function updatePrice(quantity, service) {
  var price = parseInt(service.find(".price").val().replace(/,/g, ""));
  var total = quantity * price;

  if(total < 0) {
    total = 0;
  }

  newPrice = numberFormat(total);
  service.find(".option-price").html("$" + newPrice);

  // 基于原始值计算月度费用
  var originalMonthly = service.data('original-monthly');
  newMonthly = originalMonthly * quantity;
  console.log(newMonthly);

  updateReceiptMonthly(service, newMonthly);
}

方案2：初始化时缓存原始值到元素自定义属性 #

如果不想修改HTML，可以在页面加载时把每个卡片的data-monthly原始值缓存到元素的自定义属性中：

添加初始化代码

// 页面加载完成后缓存所有卡片的原始月度费用
$(document).ready(function() {
  $(".service-option-card").each(function() {
    this._originalMonthly = $(this).data('monthly');
  });
});

修改updatePrice函数

function updatePrice(quantity, service) {
  var price = parseInt(service.find(".price").val().replace(/,/g, ""));
  var total = quantity * price;

  if(total < 0) {
    total = 0;
  }

  newPrice = numberFormat(total);
  service.find(".option-price").html("$" + newPrice);

  // 使用缓存的原始值计算
  var originalMonthly = service[0]._originalMonthly;
  newMonthly = originalMonthly * quantity;
  console.log(newMonthly);

  updateReceiptMonthly(service, newMonthly);
}

额外优化：修复减号按钮的变量作用域问题 #

原代码中dec函数存在重复声明变量的问题，建议修改：

$(".dec").click(function(){
  const service = $(this).closest(".service-option-card");
  const quantity = getCurrentQuantity(service);
  let newQuantity = quantity - 1;

  // 确保数量不小于0，去掉重复的let声明
  newQuantity = Math.max(newQuantity, 0);
  setNewQuantity(newQuantity, service);

  updatePrice(newQuantity, service);
});

内容的提问来源于stack exchange，提问作者JDawwgy