使用 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.