Question

我正在尝试进行实时计算，并且每个文本框都能正常运行，但我总是无法完成所有这些计算。

在calculateTotal我要生成此总数

cictotal = ependitureSumTotal - (ependitureSumTotal + reducibsumTotal);
$("#lblTotalcic").html(cictotal.toFixed(2));

但它只是给我一个零值

 <script>
        $(document).ready(function () {
            calculateSum();
            expendureSum();
            reducibleSumCalc();
            calculateTotal();
            //iterate through each textboxes and add keyup
            //handler to trigger sum event
            $(".incomeSum").each(function () {

                $(this).keyup(function () {
                    calculateSum();
                    calculateTotal();
                });
            });


            $(".expendureSum").each(function () {

                $(this).keyup(function () {
                    expendureSum();
                    calculateTotal();
                });
            });



            $(".reducibleSum").each(function () {

                $(this).keyup(function () {
                    reducibleSumCalc();
                    calculateTotal();
                });
            });


        });

        function calculateTotal() {
            var ependitureSumTotal = 0;
            $(".incomeSum").each(function () {

                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    ependitureSumTotal += parseFloat(this.value);
                }

            });

            var ependitureSumTotal = 0;
            //iterate through each textboxes and add the values
            $(".expendureSum").each(function () {

                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    ependitureSumTotal += parseFloat(this.value);
                }

            });
            var reducibsumTotal = 0;
            //iterate through each textboxes and add the values
            $(".reducibleSum").each(function () {

                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    reducibsumTotal += parseFloat(this.value);
                }

            });

            cictotal = ependitureSumTotal - (ependitureSumTotal + reducibsumTotal);
            $("#lblTotalcic").html(cictotal.toFixed(2));


        }
        function calculateSum() {

            var sum = 0;
            //iterate through each textboxes and add the values
            $(".incomeSum").each(function () {

                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                }

            });
            //.toFixed() method will roundoff the final sum to 2 decimal places
            $("#sumTotalIncome").html(sum.toFixed(2));


        }

        function expendureSum() {

            var sum = 0;
            //iterate through each textboxes and add the values
            $(".expendureSum").each(function () {

                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                }

            });
            //.toFixed() method will roundoff the final sum to 2 decimal places
            $("#expendureTotalSum").html(sum.toFixed(2));


        }


        function reducibleSumCalc() {

            var sum = 0;
            //iterate through each textboxes and add the values
            $(".reducibleSum").each(function () {

                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                }

            });
            //.toFixed() method will roundoff the final sum to 2 decimal places
            $("#reducibleSumTotal").html(sum.toFixed(2));


        }



    </script>

修改1

正如建议的那样，我想要对某些字段进行计算，因此我创建了一个小小的小提琴，以说明我想实现的目标，但是我不需要如何将总数数字减去平衡标签。

的jsfiddle 的 https://jsfiddle.net/fqdeeam6/

Answer 1

你的jsFiddle不清楚并且有各种各样的错误。

顺便说一下，我已经重构了它。

注意：每当你有多个具有相同类名的元素并且想要将事件绑定到所有这些元素时，你不需要每次使用它们一次。只需将事件绑定到类名即可。像这样：

$(".incomeSum").keyup(function () {
    calculateSum();
});

以下是完整的功能代码：

function calculateSum() {
  var sum = 0;
  $(".incomeSum").each(function () {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sumTotalIncome").html(sum.toFixed(2));
  calculateTotal();
}

function calculateSum2() {
  var sum = 0;
  $(".expenses").each(function () {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sumTotalExpenses").html(sum.toFixed(2));
  calculateTotal();
}

function calculateTotal() {
    incomes = +$('#sumTotalIncome').text();
    expenses = +$('#sumTotalExpenses').text();
    $('#totalResult').text((incomes - expenses).toFixed(2));
}


$(document).ready(function () {
  calculateSum();
  calculateSum2();
  calculateTotal();

  $(".incomeSum").keyup(function () {
    calculateSum();
  });

  $(".expenses").keyup(function () {
    calculateSum2();
  });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="partnerearningcics" class="col-md-7 form-control-label sidesthin-right">Incomes:</label>
  <div class="col-md-5 sidestight-left sidesthin-right">
    <input id="WagesSpouseNet" class="form-control ng-pristine ng-untouched ng-valid incomeSum" type="text" />
  </div>
  <div class="col-md-5 sidestight-left sidesthin-right">
    <input id="WagesSpouseNet2" class="form-control ng-pristine ng-untouched ng-valid incomeSum" type="text" />
  </div>
</div>
<strong><span id="sumTotalIncome" class="sumResult">0</span><hr><strong>


<div class="form-group row">
  <label for="partnerearningcics" class="col-md-7 form-control-label sidesthin-right">Expenses:</label>
  <div class="col-md-5 sidestight-left sidesthin-right">
    <input id="WagesSpouseNet" class="form-control ng-pristine ng-untouched ng-valid expenses" type="text" />
  </div>
  <div class="col-md-5 sidestight-left sidesthin-right">
    <input id="WagesSpouseNet2" class="form-control ng-pristine ng-untouched ng-valid expenses" type="text" />
  </div>
</div>
<strong><span id="sumTotalExpenses" class="sumResult">0</span></strong>
  
<p><strong>Total: <span id="totalResult">0</span></strong></p>

计算出jquery calc的总数

1 个答案: