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>

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

Answer 1

我认为我们首先需要改进代码的逻辑。首先，我们创建一个对象，它将持有你的电脑的每个属性的值

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>