javascript - JQuery 每行多个输入字段 keyup 功能不起作用

Question

您好，我正在尝试使我的 jquery 代码正常工作，但它根本不工作，我不知道它背后有什么问题，但它在多行中包含多个文本框，每行计算自己的总和

这里是Fiddle link

这是我的代码

$(document).ready(function(){
$('.employee input[type="text"]').keyup(function() {
        var basic_salary = parseInt($('input[name^=txtMonthlyRate]').val());
        var advance_salary = parseInt($('input[name^=txtAdvance]').val());
        var recover_comm = parseInt($('input[name^=txtRecovery]').val());
        var sales_comm = parseInt($('input[name^=txtSales]').val());
        var deduction_salary = parseInt($('input[name^=txtDeduction]').val());
        var adjustment_salary = parseInt($('input[name^=txtAdjustment]').val());
        var total_sum = ((basic_salary+recover_comm+sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
        $('input[name^=txtTotal]').val(total_sum);
        console.log(total_sum)
); 
});

Answer 1

txtSales1、txtDeduction1、txtAdjustment1 变量在 JavaScript 中采用驼峰式大小写，但在 html 输入名称中不采用驼峰式大小写。所以这些返回 NaN。

更新此外，您需要使用选择器函数的第二个参数设置所引用内容的上下文:

$('.employee input[type="text"]').keyup(function(e) { 
    var $scope = $(this).closest('.employee');
    var basic_salary = parseInt($('input[name^=txtMonthlyRate]', $scope).val());
    var advance_salary = parseInt($('input[name^=txtAdvance]', $scope).val());
    var recover_comm = parseInt($('input[name^=txtRecovery]', $scope).val());
    var sales_comm = parseInt($('input[name^=txtSales]', $scope).val());
    var deduction_salary = parseInt($('input[name^=txtDeduction]', $scope).val());
    var adjustment_salary = parseInt($('input[name^=txtAdjustment]', $scope).val());
    var total_sum = ((basic_salary+recover_comm+sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
    $('input[name^=txtTotal]', $scope).val(total_sum); 
});