JavaScript或jQuery增减数量如何计算价格？

Question

我有一个函数可以在用户尝试增加或减少产品数量时计算价格。增加数量时，价格计算准确。但是当尝试减少数量时，会显示错误的结果。 使用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);
        }
    }

如有任何建议，我们将不胜感激。

Answer 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);
}