使用JavaScript和jQuery对div中的输入和返回值求和

我试图实时返回输入值的总和，但它只是加起来整个值，不加起来的美分。我也想加几分钱，我该怎么办?

当前，脚本返回类似:100.00
但是它应该返回:100.85

我认为这是一个简单的事情来解决，但我是一个新的JavaScript。

下面是我的代码:

$('.cardAccordion').on("change", function() {
var lts = $(this).find("#lts").val();
var fuelPrice = $(this).find("#fuelPrice").val();
var calc = lts * fuelPrice;
var sum = calc.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL"
});

$(this).find("#ltsValue").val(calc)

})

var res = 0.00;
$('#addToCart').click(function() {
var val = $(this).parents('.cardAccordion').find('#ltsValue').val();
if(val == 0){
$("#lts").css({
borderColor: "#f27474"
})
}else{

var qnt = $(this).parents('.fuelCard').find('#qntField').val();
$(this).parents('.cardAccordion').find('#ltsValue').each(function () {
res += ~~$(this).val() * qnt;
});
var sum = res.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL"
});
$("[name=result]").val(res);
$("h3[name=resultText]").text(sum)
}
})

<div class="card fuelCard">
<input type="number" value="1" id="qntField" name="quantity" class="form-control  quantityField" disabled>
<div class="cardAccordion">
<input type="hidden" value="6.39" id="fuelPrice" />
<label>Litros</label>
<select class="form-control" id="lts">
<option value="0">Selecione</option>
<option value="5">5 Lts</option>
<option value="10">10 Lts</option>
<option value="15">15 Lts</option>
<option value="20">20 Lts</option>
</select>
<input type="text" class="form-control" id="ltsValue" value="0" disable />
<button class="btn" id="addToCart">Adicionar ao carrinho</button>
<input type="hidden" value="0.00" name="result" />
<h3 name="resultText">R$ 0,00</h3>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

整数算术向下舍入。使用parseFloat代替。我做了一些改变你的代码，这里是工作演示。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="card fuelCard">
<input type="number" value="1" id="qntField" name="quantity" class="form-control  quantityField" disabled>
<div class="cardAccordion">
<input type="hidden" value="6.39" id="fuelPrice" />
<label>Litros</label>
<select class="form-control" id="lts">
<option value="0">Selecione</option>
<option value="5">5 Lts</option>
<option value="10">10 Lts</option>
<option value="15">15 Lts</option>
<option value="20">20 Lts</option>
</select>
<input type="text" class="form-control" id="ltsValue" value="0" disable />
<button class="btn" id="addToCart">Adicionar ao carrinho</button>
<input type="hidden" value="0.00" name="result" />
<h3 name="resultText">R$ 0,00</h3>
</div>
</div>
<script>
$('.cardAccordion').on("change", function() {
var lts = $(this).find("#lts").val();
var fuelPrice = $(this).find("#fuelPrice").val();
var calc = lts * fuelPrice;
var sum = calc.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL"
});

$(this).find("#ltsValue").val(calc)

})

var res = 0.00;
$('#addToCart').click(function() {
var val = $(this).parents('.cardAccordion').find('#ltsValue').val();
if(val == 0){
$("#lts").css({
borderColor: "#f27474"
})
}else{

var qnt = $(this).parents('.fuelCard').find('#qntField').val();
$(this).parents('.cardAccordion').find('#ltsValue').each(function () {
res +=  parseFloat($(this).val()) * qnt;
});
var sum = res.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL"
});
$("[name=result]").val(parseFloat(res));
$("h3[name=resultText]").text(sum)
}
})
</script>
</body>
</html>

相关内容

最新更新

热门标签：