我需要什么 我想将所有内容加起来等于图像，但我做不到
如下代码如何将数量与单位价格倍数后的所有金额相加？
这是 Html 元素
<html>
<form>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
Total All:<input type="text" class="result">
</form>
</html>
这是 Javascript 代码 该js只能根据单价和数量进行合计，如amount = quant*unit
结果应为 Result = amount+amount1+amount2+amount3+amount4+amount5。但我做不到
<script>
$(document).ready(function(){
$('.qty,.unit').on('change', function(){
var qty = parseFloat($('.quant').val() );
var unit = parseFloat( $('.unit_p').val());
var quant1 = parseFloat($('.quant1').val() );
var unit1 = parseFloat( $('.unit1').val());
var quant2 = parseFloat($('.quant2').val() );
var unit2 = parseFloat( $('.unit2').val());
var quant3 = parseFloat($('.quant3').val() );
var unit3 = parseFloat( $('.unit3').val());
var quant4 = parseFloat($('.quant4').val() );
var unit4 = parseFloat( $('.unit4').val());
var quant5 = parseFloat($('.quant5').val() );
var unit5 = parseFloat( $('.unit5').val());
var amount = qty * unit;
var amount1 = quant1*unit1;
var amount2 = quant2*unit2;
var amount3 = quant3*unit3;
var amount4 = quant4*unit4;
var amount5 = quant5*unit5;
var result = [];
if(isNaN(qty) || isNaN(unit)){
$('.amount').val('');
}else{
$('.amount').val(amount);
}if(isNaN(quant1)||isNaN(unit1)){
$('.amount1').val('');
}else{
$('.amount1').val(amount1);
}if(isNaN(quant2) || isNaN(unit2)){
$('.amount2').val('');
}else{
$('.amount2').val(amount2);
}if(isNaN(amount3) || isNaN(amount3)){
$('.amount3').val('');
}else{
$('.amount3').val(amount3);
}if(isNaN(quant4) || isNaN(unit4)){
$('.amount4').val('');
}else{
$('.amount4').val(amount4);
}if(isNaN(quant5)||isNaN(quant5)){
$('.amount5').val('');
}else{
$('.amount5').val(amount5);
}
});
</script>
我无法将所有金额相加得出总计
请帮忙
最佳答案
您需要将 html 更改为:
<html>
<form>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
<div>
Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
Amount: <input type='text' class='amount'>
</div>
Total All:<input type="text" class="result">
</form>
</html>
因此您可以按如下方式更新 jquery 代码:
$(function () {
$('.unit,.qty').on('change', function () {
var unit = $(this).hasClass('unit') ? $(this).val() : $(this).siblings('.unit').val();
var qty = $(this).hasClass('qty') ? $(this).val() : $(this).siblings('.qty').val();
unit = unit || 0;
qty = qty || 0;
var val = unit >= 1 && qty >= 1 ? parseFloat(unit * qty) : 0;
$(this).siblings('.amount').val(val);
var total = 0;
var update = false;
$('.amount').each(function () {
val = parseFloat($(this).val()) | 0;
total = val ? (parseFloat(total + val)) : total;
});
$('.result').val(total);
});
});
关于javascript - 如何在javascript中计算小计和总计？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27617608/