使用 JavaScript 和 jQuery 对 div 中的输入和返回值求和
[英]Sum input and return values in div with JavaScript and jQuery
问题描述
我正在尝试实时返回输入值的总和，但它只是将整个值相加，而不是将美分相加。 我也想加分，怎么办？
目前，脚本返回类似：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>
1 个解决方案
解决方案1
0 2021-10-16 09:17:17
整数算术向下舍入。 使用 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>
部分中输入值的jQuery总和
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.