javascript - 回发后保留计算的 jQuery 总数

Question

我正在使用 jQuery 和 ASP.NET MVC 3 以及 razor View 引擎。

我有几个可以在其中输入数值的文本框。我有一个标签控件，其中包含由 jQuery 计算的文本框总数。

我有以下文本框和标签(用于计算结果):

<input id="GrossMonthlySalary" type="text" />
<input id="SpouseGrossMonthlySalary" type="text" />
<input id="AdditionalIncome" type="text" />
<input id="ChildSupportIncome" type="text" />

<label id="TotalMonthlyIncome" class="total-amount"></label>

在我的 .js 文件中，我有以下内容:

$(function () {

   $('#GrossMonthlySalary, #SpouseGrossMonthlySalary, #AdditionalIncome, #ChildSupportIncome').keyup(function () {
      var val1 = $('#GrossMonthlySalary').val();
      var val2 = $('#SpouseGrossMonthlySalary').val();
      var val3 = $('#AdditionalIncome').val();
      var val4 = $('#ChildSupportIncome').val();

      var totalMonthlyIncome =
         (parseInt(val1, 10) || 0) +
         (parseInt(val2, 10) || 0) +
         (parseInt(val3, 10) || 0) +
         (parseInt(val4, 10) || 0);

      if (totalMonthlyIncome == 0) {
         $('#TotalMonthlyIncome').text('');
      }
      else {
         $('#TotalMonthlyIncome').text(totalMonthlyIncome);
      }
   });
});

如果我单击“提交”按钮并且出现错误，则会显示错误，并清除带有计算结果的“我的标签”控件。回发后如何保留值？

关于我计算结果的方式还有一个问题，这个方法好吗还是有更好的方法？

Answer 1

请记住，parseInt 在遇到非数字字符时就会失败:

parseInt('$10') // NaN

就计算总数而言，由于您没有对特定值进行任何额外的处理，因此您可以使用类选择器来简化整个过程。

$('.incomes').keyup(function () {

  var incomes = $('.incomes'),
      totalDisplay = $('#TotalMonthlyIncome'),
      totalVal = 0;

  incomes.each(function() {
      var matches = null;
      // find the number to add to total
      matches = $(this).val().match(/\d+/);
      // not bothering with the regex on totalVal because we set it
      totalVal = ( matches !== null ? parseInt(matches[0],10) : 0 ) + parseInt(totalVal,10);
  });
  totalVal = totalVal === 0 ? '' : totalVal;
  totalDisplay.text(totalVal);
});