使用绑定的简单JavaScript/jQuery总和函数

我有一个HTML表单，它有多个在不同文本框中进行基本SUM计算的实例。我无法控制更新或重写HTML。我需要一种方法来编写一个通用总和函数，它将“侦听”任何文本框中的更改，执行总和，并将结果输出到文本框的结果文本框中。使用绑定的简单JavaScript/jQuery总和函数

例如：

<input id="txtBox1"/> 
<input id="txtBox2"/> 
<input id="txtSumOfBox1AndBox2"/> 

<input id="txtBox3"/> 
<input id="txtBox4"/> 
<input id="txtSumOfBox3AndBox4"/>

我想这样做的是“绑定”或“听”（我不知道该用），将“听”到“txtBox1”的变化或“txtBox2”，进行数学运算，然后将结果输出到结果框“txtSumOfBox1AndBox2”中。对于方框3和方框4，它也会这样做。

我可以有1到很多这些，他们都需要使用相同的总和计算和输出到它们各自的结果字段。

我能有这样的情况：我有以下还有：

<input id="txtBox5"/> 
<input id="txtBox6"/> 
<input id="txtBox7"/> 
<input id="txtBox8"/> 
<input id="txtBox9"/> 
<input id="txtSumOfBox5Through9"/>

...这里是我的javascript：

$('#txtProductAUsed,#txtProductBUsed').on('keypress change', { 
    inputs: "txtProductAUsed:txtProductBUsed", 
    output: "txtTotalUsed" 
}, calc_sum); 

$('#txtMixedInValue,#txtAmtNeeded,#txtLeftover').on('change', { 
    inputs: "txtMixedInValue:txtAmtNeeded:txtLeftover", 
    output: "txtTotalProduct" 
}, calc_sum); 

function calc_sum(event) { 
    var sum = 0; 
    var inputFields = event.data.inputs; 
    var totalField = event.data.output; 

    $.each(inputFields.split(':'), function() { 
    sum += Number($('#' + this).val()); 
    }); 

    $('#' + totalField).val(sum); 
}

我已经通过jQuery的绑定的文档阅读但对于如何获得我需要的参数，我没有任何意义。我得到了寻找“变化”事件的概念，但没有对其进行编码以使其足够通用以接受任何输入。

编辑我玩过“开”方法，想出了这个。

这里是我的解决方案的的jsfiddle： https://jsfiddle.net/mrhankuk/4ox7y1v1/1/

来源

2016-04-26 Mark

看看.on（）方法。绑定已弃用。这可能很有挑战性，因为您没有一种很好的方法来识别各种文本框。你必须弄清楚如何识别所有输入文本框和输出文本框的（唯一）id，然后将输入连接到输出。如果你有班级将输入和输出分组在一起，你会有更容易的时间。 –

编辑（用于升级再次改变相同的输入时的值）：

于是，我改变了自己的方式听者通过选择你的总和，所以你可以在阵列上设置的任何选择你想要的：

$.fn.sumListener = function() { 
    var args = arguments; 
    var $sumInput = $(this); 
    $sumInput.prop("disabled", "disabled"); 
    for(i in args) { 
    $(arguments[i]).on("change", function() { 
     $sumInput.val(0); 
     $(Array.from(args).join(",")).each(function() { 
      $sumInput.val(+$sumInput.val() + +$(this).val()); 
     }); 
    });   
    } 
}; 
$("#txtTotalUsed").sumListener("#txtProductAUsed", "#txtProductBUsed"); 
$("#txtTotalProduct").sumListener("#txtMixedInValue", "#txtAmtNeeded", "#txtLeftover", ".any");

小提琴：https://jsfiddle.net/diegopolido/sexd7b28/2/

我希望它有帮助

来源

2016-04-27 18:57:41

非常好！比我的解决方案要干净得多。谢谢！ – Mark

我的荣幸！：d –

使用绑定的简单JavaScript/jQuery总和函数

回答

相关问题