How can I save the original value of a data attribute in jQuery-CodePudding

I have an element that I'm using with a quantity input. When the quantity changes I update the data attribute with the new value.

The problem is that when the data attribute is changed, the next iteration of the change is being based off the changed value not the original value.

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

  updatePrice(newQuantity, service);
});

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

  if(newQuantity <= 0) {
    let newQuantity = 0
    setNewQuantity(newQuantity, service);
  } else {
    setNewQuantity(newQuantity, service);
  }

  updatePrice(newQuantity, $(this).closest(".service-option-card"));
});



function getCurrentQuantity(service) {
  let quantity_str = service.find(".quantity").val();
  quantity_num = Number(quantity_str);
  return quantity_num;
}



function setNewQuantity(quantity, service) {
  service.find(".quantity").val(quantity);
}


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 monthly = service.data('monthly');
  newMonthly = monthly * quantity;
  console.log(newMonthly);

  updateReceiptMonthly(service, newMonthly);
}

function updateReceiptMonthly(service, newMonthly) {
  service.data('monthly', newMonthly);
}



// Number format

function numberFormat(nStr)
{
  nStr  = '';
  x = nStr.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.'   x[1] : '';
  var rgx = /(\d )(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1'   ','   '$2');
  }
  return x1   x2;
}

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


<div  data-monthly="10">

  <input style="display: none;"  value="50">                                           

  <p >$50</p>

  <div >
    <button >-</button>
      <input  value="1">
    <button > </button>
  </div>

</div>



<div >  
  <div >
    <p >Monthly Cost:</p>
    <p >$0</p>
  </div>
</div>

When you run the above snippet, you can see the console.log is incrementing 10 > 20 > 60 > 240 and so on. this is because when I update the data-monthly attribute on my service-option-card its then multiplying the NEW value by the quantity. What I would like is for it to multiply by the ORIGINAL value of 10 so the console.log should be 10 > 20 > 30 > 40 and so on. I cant just put 10 in because the values change in my application for diffrent service option cards.

CodePudding user response：

You could add another property with the same value, but then keep this value the same. Then you'll always have the original base value to use:

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

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

  if(newQuantity <= 0) {
    let newQuantity = 0
    setNewQuantity(newQuantity, service);
  } else {
    setNewQuantity(newQuantity, service);
  }

  updatePrice(newQuantity, $(this).closest(".service-option-card"));
});



function getCurrentQuantity(service) {
  let quantity_str = service.find(".quantity").val();
  quantity_num = Number(quantity_str);
  return quantity_num;
}



function setNewQuantity(quantity, service) {
  service.find(".quantity").val(quantity);
}


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);
  // now using original value here
  var monthly = service.data('base-monthly');
  newMonthly = monthly * quantity;
  console.log(newMonthly);

  updateReceiptMonthly(service, newMonthly);
}

function updateReceiptMonthly(service, newMonthly) {
  service.data('monthly', newMonthly);
}



// Number format

function numberFormat(nStr)
{
  nStr  = '';
  x = nStr.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.'   x[1] : '';
  var rgx = /(\d )(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1'   ','   '$2');
  }
  return x1   x2;
}

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


<div  data-monthly="10" data-base-monthly="10">

  <input style="display: none;"  value="50">                                           

  <p >$50</p>

  <div >
    <button >-</button>
      <input  value="1">
    <button > </button>
  </div>

</div>



<div >  
  <div >
    <p >Monthly Cost:</p>
    <p >$0</p>
  </div>
</div>