如何在 jQuery 中保存数据属性的原始值

Question

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 class="service-option-card" data-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>

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.

Answer 1

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 class="service-option-card" data-monthly="10" data-base-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>

Answer 2

did you try to create another data-monthly attribute that does not change? for example call it data-monthly-base and use it in updatePrice function instead of data-monthly?