Question

我有一个HTML表单，它有多个在不同文本框中进行基本SUM计算的实例。我无法控制更新或重写HTML。我需要一种方法来编写一个通用的和函数，它将＆＃34; listen＆＃34;对于任何文本框的更改，执行总和，并在结果文本框中输出结果。

例如：

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

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

我想做的是＆＃34; bind＆＃34;或＆＃34;听＆＃34; （我不知道该使用哪种方式）将会＃34;听＆＃34;改变＆＃34; txtBox1＆＃34;或＆＃34; txtBox2＆＃34;，进行数学计算，然后将总和输出到结果框中，＆＃34; txtSumOfBox1AndBox2＆＃34;。对于方框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 bind的文档，但是对于我如何获取我需要的参数没有任何意义。我得到了寻找“改变”的概念。事件，但没有编码，使其足够通用，可以接受任何输入。

修改我玩了＃34; on＆＃34;方法并想出了这个。

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

Answer 1

EDITED（用于在再次更改相同输入时更新值）：

所以，我改变了你通过选择器监听你的总和的方式，所以你可以在数组上设置你想要的任何选择器：

$.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/

我希望它有所帮助

使用bind

1 个答案: