jquery在价格计算中返回相同的值。

Question

我想从数据库中提取数据。所有的按钮都在工作。价格就要来了。但是当我提出一个新的查询时，它是从产品的价格中提取的，而不是从当前的价格中提取出来的，它扭曲了价格。如果你能帮忙我会很高兴的。

​

    Number.prototype.formatMoney = function (fractionDigits, decimal, separator) {
        fractionDigits = isNaN(fractionDigits = Math.abs(fractionDigits)) ? 2 : fractionDigits;

        decimal = typeof (decimal) === "undefined" ? "." : decimal;

        separator = typeof (separator) === "undefined" ? "," : separator;

        var number = this;

        var neg = number < 0 ? "-" : "";

        var wholePart = parseInt(number = Math.abs(+number || 0).toFixed(fractionDigits)) + "";

        var separtorIndex = (separtorIndex = wholePart.length) > 3 ? separtorIndex % 3 : 0;

        return neg +

            (separtorIndex ? wholePart.substr(0, separtorIndex) + separator : "") +

            wholePart.substr(separtorIndex).replace(/(\d{3})(?=\d)/g, "$1" + separator) +

            (fractionDigits ? decimal + Math.abs(number - wholePart).toFixed(fractionDigits).slice(2) : "");

    };
    function PriceCalculator(product_price, featured_price) {
        var product_money =   product_price;
        var money_to_fall =   featured_price;
        var money = product_money + money_to_fall;
        var result=  Number(money).formatMoney(2, ',', '.');
        document.getElementById("money").innerHTML=result;
    }

<div id="form_step_1">
<div class="container">
<div class="row">
<div class="talepler mb-3">
  <h4>GB</h4>
  <div class="row mb-3" style="display: inline-block">
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-1"
             name="1"
             value="features-value-1"
             data-money="-300"
             data-product-money="2500"
              onclick="PriceCalculator(2500, -300)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label>
      </div>
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-2"
             name="1"
             value="features-value-2"
             data-money="-200"
             data-product-money="2500"
              onclick="PriceCalculator(2500, -200)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label>
      </div>
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-3"
             name="1"
             value="features-value-3"
             data-money="-50"
             data-product-money="2500"
              onclick="PriceCalculator(2500, -50)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label>
      </div>
  </div>
  
  <h4>DISPLAY</h4>
  <div class="row mb-3" style="display: inline-block">
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-1"
             name="2"
             value="features-value-1"
             data-money="0"
             data-product-money="2500"
              onclick="PriceCalculator(2500, 0)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label>
      </div>
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-2"
             name="2"
             value="features-value-2"
             data-money="-1500"
             data-product-money="2500"
              onclick="PriceCalculator(2500, -1500)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-2">Broken</label>
      </div>
  </div>
</div>
</div>
<div style="position:absolute; right: 0px;">
<div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong> <div style="display: inline-block" id="money">Not calculated</div></div>
</div>
</div>
</div>

​

您可以从上面的代码中看到错误。首先选择16 at，然后选择耐久，看看价格，然后再选择16 at，你会看到价格的变化，你会明白耐久的不起作用。

Answer 1

我认为我们首先需要改进代码的逻辑。首先，我们创建一个对象，它将保存您的PC的每个属性的值。

    const values = {
      gb: null,
      display: null,
    }

然后，我们删除您的formatMoney函数，因为javascript已经有了生成格式化数字的内置number.toLocaleString方法。

Number(total).toLocaleString("pt-BR",{minimumFractionDigits: 2, maximumFractionDigits: 2});

最后，我们更新您的PriceCalculator函数，该函数将用于控制每个值并计算结果，然后更改调用以匹配逻辑。即：

// Here we change the value of the display to 2500, this value will be added to the negative value of the GB which will generate the expected result.
onclick="PriceCalculator('display', 2500)"

​

const values = {
  gb: null,
  display: null,
}

function PriceCalculator(label, newPrice) {
  values[label] = newPrice;
  if(values.gb != null && values.display != null){
    var total = values.gb + values.display;
    var result =  Number(total).toLocaleString("pt-BR",{minimumFractionDigits: 2, maximumFractionDigits: 2});
    document.getElementById("money").innerHTML=result;
  }    
}

<div id="form_step_1">
<div class="container">
<div class="row">
<div class="talepler mb-3">
  <h4>GB</h4>
  <div class="row mb-3" style="display: inline-block">
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-1"
             name="1"
             value="features-value-1"
             data-money="-300"
             data-product-money="2500"
              onclick="PriceCalculator('gb', -300)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label>
      </div>
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-2"
             name="1"
             value="features-value-2"
             data-money="-200"
             data-product-money="2500"
              onclick="PriceCalculator('gb', -200)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label>
      </div>
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-3"
             name="1"
             value="features-value-3"
             data-money="-50"
             data-product-money="2500"
              onclick="PriceCalculator('gb', -50)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label>
      </div>
  </div>
  
  <h4>DISPLAY</h4>
  <div class="row mb-3" style="display: inline-block">
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-1"
             name="2"
             value="features-value-1"
             data-money="0"
             data-product-money="2500"
              onclick="PriceCalculator('display', 2500)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label>
      </div>
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-2"
             name="2"
             value="features-value-2"
             data-money="-1500"
             data-product-money="2500"
              onclick="PriceCalculator('display', 1500)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-2">Broken</label>
      </div>
  </div>
</div>
</div>
<div style="position:absolute; right: 0px;">
<div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong> <div style="display: inline-block" id="money">Not calculated</div></div>
</div>
</div>
</div>

​