Javascript 添加两个不同文本字段的值以填充多行上的另一个文本字段

每当我为每一行输入数量和单位成本值时，我都希望将乘以的结果自动显示在“总成本”字段中

我在下面编写了jquery脚本，试图找出如何进行，但无法使其工作

$('.unit, .quantity').on('change', function() {
           // var quantity = $('#expenseslist-quantity').val();
           // var unit = $('#expenseslist-unit_cost').val();
           var total = 0;
            $('.quantity, .unit').each(function(){
                total = quantity * unit ;
            });
            $('#expenseslist-total_cost').val(total);
        });

请提供帮助。

更新的答案： 根据您最近的信息，我对代码进行了必要的更改

PS：为此，您还必须对HTML进行一些更改，并在其上插入

数据-

属性

对于单位输入：

data type=“Unit”data field=“field{1}”

对于数量输入：

data type=“qty”data field=“field{1}”

对于输出输入区域：

data field count=“field{1}”

之后，请尝试以下代码：

$('.unit, .quantity').on('keyup', function() {
let fieldType = $(this).data('type'),
        fieldCount = $(this).data('field'),
        intOne = $(this).val(),
        intTwo = 1

    if (fieldType == 'qty') {
        intTwo = $('input[data-type=qty]').val()
    } else {
        intTwo = $('input[data-type=unit]').val()
    }

    let total = intOne * intTwo

    $('input[data-field-count='+ fieldCount +']').val(total);
});

旧答案： 由于您的问题相当模糊，我从中了解到：

$('.unit, .quantity').on('keyup', function() {
    let qty = $('#expenseslist-quantity').val(),
        unit = $('#expenseslist-unit_cost').val()

    let total = unit * qty

    $('#expenseslist-total_cost').val(total);
});

我不知道您为什么要使用

每个

循环。是否有多个单位和数量字段

尝试学习如何实现动态元素

$（'.unit，.quantity'）。关于（'change'，函数（事件）{
var total1=0；
var total2=0；
var quantity1=$（'#expenseslist-quantity1'）.val（）；
var unit1=$（'费用列表-单位成本1'）.val（）；
total1=数量1*unit1；
$（'费用清单-总成本1'）.val（总计1）；
var quantity2=$（'#expenseslist-quantity2'）.val（）；
var unit2=$（'费用列表-单位成本2'）.val（）；
total2=数量2*unit2；
$（“#费用清单-总成本2”）.val（总计2）；
});

选择一个项目
车辆一般维修和保养
运输成本
选择一个项目
车辆一般维修和保养
运输成本
删除每个函数中的
Do$（this）.val（）。是否可以更新html代码。因为我想检查您是在设置值还是html。请更新你的html代码是的，有超过单位和数量字段，我也附上了我的第一篇文章的形式外观。