在 JavaScript 或 jQuery 中增加和减少数量时如何计算价格？

Posted 2023-02-23

【中文标题】在 JavaScript 或 jQuery 中增加和减少数量时如何计算价格？

【英文标题】：How to calculate price when increase and decrease quantity in JavaScript or jQuery?

【发布时间】：2021-10-01 05:15:42

【问题描述】：

当用户尝试增加或减少产品数量时，我有一个计算价格的功能。增加数量时，价格计算准确。但是当尝试减少数量时，显示错误的结果。 使用 jQuery 或 javascript 增加或减少商品数量时如何计算价格？

下面的函数是将DIV内的所需数据添加到模态中。

function getmodal(mappedcityid)
            var url = "api/viewproductbyid";
            $.post(url, 
                mappedcityid : mappedcityid,
            , function(data, status) 
                if (data.status == "OK") 
                    if (data.statusCode == 1) 
                        var productdata = data.response;
                        var baseprice = productdata.baseprice;
                        var productname = productdata.product.prductname;
                        document.getElementById('productmodal').innerhtml = "<div class=\"product-details-content quickview-content\">"
                            +"<h2>"+productname+"</h2>"
                            +"<div class=\"pricing-meta\">"
                                +"<ul>"
                                    +"<li class=\"old-price not-cut\" id=\"priceid\">&#8377;&nbsp;"+baseprice+"</li>"
                                +"</ul>"
                            +"</div>"
                            +"<p>"+description+"</p>"
                            +"<div class=\"pro-details-quality\">"
                                +"<div class=\"cart-plus-minus\">"
                                    +"<div class=\"dec qtybutton\" onclick=\"decbtn();\">-</div>"
                                    +"<input class=\"cart-plus-minus-box\" type=\"text\" name=\"qtybutton\" id=\"quantity\" value=\"1\" onkeyup=\"countprice();\"/>"
                                    +"<div class=\"inc qtybutton\" onclick=\"incbtn();\">+</div>"
                                +"</div>"
                            +"</div>"
                        +"</div>"; 
                     else 
                        var error = data.responseMessage;
                        swal(error, "", "error");
                    
                 else 
                    var error = data.responseMessage;
                    swal(error, "", "error");
                
            );
            
    

以下两个函数是在增加或减少数量时计算总价。但减量功能无法正常工作。它将数量与新数量相乘，因此价格在上涨。

    function decbtn()
        var amount = "";
        var price = $("#priceid").text();
        var oldprice = price.replace(/[^\x00-\x7F]/g, "");
        var val = $("#quantity").val();
        if(val <= 1)
            val = 1;
        else
            val = val-1;
        
        $("#quantity").val(val);
        if(null != oldprice || oldprice != "")
            amount = parseFloat(oldprice)*parseFloat(val);
            $("#priceid").html('&#8377;&nbsp;'+amount);
        
    
    function incbtn()
        var amount = "";
        var price = $("#priceid").text();
        var oldprice = price.replace(/[^\x00-\x7F]/g, "");
        var val = $("#quantity").val();
        val = parseInt(val)+1;
        $("#quantity").val(val);
        if(null != oldprice || oldprice != "")
            amount = parseFloat(oldprice)*parseFloat(val);
            $("#priceid").html('&#8377;&nbsp;'+amount);
        
    

任何建议都将不胜感激。

【参考方案1】：

我认为这两个功能都是错误的。当您再次将新价格写入#priceid 时，您将失去基本价格，因为您将其覆盖。有两种方法可以解决这个问题：

1.将基本价格存储在其他地方

在这种情况下，使用#priceid 仅显示当前价格。

假设底价是10.0，你的代码应该差不多是这样的：

function decbtn() 
  const basePrice = 10.0;
  let val = $("#quantity").val();
  if (val <= 1) 
    val = 1;
   else 
    val = val - 1;
  
  $("#quantity").val(val);
  const currentPrice = basePrice * val;
  $("#priceid").html('&#8377;&nbsp;' + currentPrice);



function incbtn() 
  const basePrice = 10.0;
  let val = $("#quantity").val();
  val = parseInt(val) + 1;
  $("#quantity").val(val);
  const currentPrice = basePrice * val;
  $("#priceid").html('&#8377;&nbsp;' + currentPrice);

2.在每个操作中重新计算基本价格。

虽然此解决方案的效率低于第一个解决方案，但如果您不能或不想存储基本价格，它仍然可以使用。

function decbtn() 
  // Get the current price
  let currentPrice = $("#priceid").text().replace(/[^\x00-\x7F]/g, "");
  currentPrice = parseFloat(currentPrice);

  // Get the current quantity
  let val = $("#quantity").val();
  val = parseInt(val);

  // Calculate the base price
  const basePrice = currentPrice / val;

  // Update the new quantity
  if (val <= 1) 
    val = 1;
   else 
    val = val - 1;
  
  $("#quantity").val(val);

  // Calculate the new price
  const newPrice = basePrice * val;
  $("#priceid").html('&#8377;&nbsp;' + newPrice);



function incbtn() 
  // Get the current price
  let currentPrice = $("#priceid").text().replace(/[^\x00-\x7F]/g, "");
  currentPrice = parseFloat(currentPrice);

  // Get the current quantity
  let val = $("#quantity").val();
  val = parseInt(val);

  // Calculate the base price
  const basePrice = currentPrice / val;

  // Update the new quantity
  val = parseInt(val) + 1;
  $("#quantity").val(val);

  // Calculate the new price
  const newPrice = basePrice * val;
  $("#priceid").html('&#8377;&nbsp;' + newPrice);

【讨论】：

不工作。 baseprice 是取自以下产品的价格：₹ "+baseprice+""

这是实际价格：850，当增加数量让说 3 时价格将是 850*3 = 2550，同时当试图减少数量时让说 2 然后它正在采取价格为 2550，然后给出结果为： 2550*2 = 5100

这就是我所说的“你失去了基本价格，因为你覆盖了它”。而取自<li class=\"old-price not-cut\" id=\"priceid\">₹ "+baseprice+"</li>"的价格是现价，不是底价。例如，当你计算850 * 3 = 2550时，你会在那里写2550，这就是为什么下次计算时取2550。

你可以试试这个：将数量设置为3后，你看到实际价格是850 * 3 = 2550。然后尝试将数量增加到4个，你会看到价格变成2550 * 4 = 10200，这是错误的。

现在我得到了想要的输出。谢谢。