我上下查找试图弄清楚这一点，我正在尝试使用 3 个文本框输入对更改事件进行简单的计算
项目成本文本框
手动输入exp值的折扣百分比： 29
总计：这将等于成本 * 的折扣等于新的总计。
当折扣或成本更改时，总计将随之更改 我有获取总数的 javascript...但我还需要将成本和总计从数字格式化为货币而不是 2500，它格式化为 $2,500.00 等
感谢任何帮助，我对此很陌生，仍在学习，但我只是迷失了
var number = 14000;
var percentToGet = 29;
var percent = (percentToGet / 100) * number;
alert(percentToGet + "% of " + number + " is " + percent);
function calculatePercent(percent, num){
return (percent / 100) * num;
This gives me the discount of 4,060 of 14,000 which total becomes 9,940
我可能需要使用 jquery 或 ajax，但我不知道从哪里开始。
hope below test implementation can help , please input all item price and discount to observe the result
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Form</title>
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Calculate Discount </h1>
<form id="discountForm">
<div class="row mb-3">
<div class="row col-md-12">
<div class="col-md-3">
<label for="name" class="form-label">Item Name</label>
</div>
<div class="col-md-3">
Item Price
</div>
<div class="col-md-3 text-center">
Item Price After Dicount
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-md-3">
<label for="name" class="form-label">Item 1</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="item__1">
</div>
<div class="col-md-3 text-center" id="discunt_price_1">
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-md-3">
<label for="name" class="form-label">Item 2</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="item__2">
</div>
<div class="col-md-3 text-center" id="discunt_price_2">
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-md-3">
Discount %
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="discount" >
</div>
<div class="col-md-3 text-center">
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-md-3">
</div>
<div class="col-md-3 text-right">
Total After Discount
</div>
<div class="col-md-3 text-center" id="total_price">
</div>
</div>
</div>
<!-- <button type="button" class="btn btn-primary">Submit</button>-->
</form>
</div>
<!-- Include Bootstrap JS (optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const isDigit = (value) => /^\d+$/.test(value) ;
const calculatePercent = (percent, num) => {
return num - ((percent / 100) * num);
}
const setDiscountPrice = () => {
let flagInputError = false;
$("[id^='item__']").each(function (e) {
let id = $(this).attr('id').replace("item__", "");
let itemPrice = $("#item__"+id).val();
let discount = $("#discount").val();
if(isDigit(itemPrice) && isDigit(discount)) {
$("#discunt_price_"+id).html(calculatePercent(discount, itemPrice).toFixed(2));
}
else {
flagInputError = true;
}
});
if(flagInputError) {
$("[id^='item__']").each(function (e) {
let id = $(this).attr('id').replace("item__", "");
$("#discunt_price_"+id).html("");
$("#total_price").html("");
});
}
else {
let total = 0;
$("[id^='item__']").each(function (e) {
let id = $(this).attr('id').replace("item__", "");
total += parseFloat($("#discunt_price_"+id).html());
});
$("#total_price").html(total.toFixed(2));
}
}
$(document).ready(function() {
var inputs = $('#discountForm input');
inputs.change(function() {
setDiscountPrice();
});
});
</script>
</body>
</html>