javascript - 如何通过实时计算对jquery中的值求和

Question

我有这段代码用于实时计算。

$(document).ready(function(){
    $('#bread1').keyup(function(){
        $('.totalbread1').text($('#bread1').val() * 2.5); // how many of bread1, multiply with 2.5 price
    });

    $('#bread2').keyup(function(){
        $('.totalbread2').text($('#bread2').val() * 3.5);
    });

    $('#bread3').keyup(function(){
        $('.totalbread3').text($('#bread3').val() * 4.5);
    });

});

我怎样才能以同样的方式计算所有这些的实时总价，让我们说:

<span class="totalprice"></span> 

Answer 1

试试这个:编写一个函数来计算总数，并在每个文本框的每个 keyup 事件中调用它，如下所示。

$(document).ready(function(){
      //function to calculate total
      var calculateTotal = function(){
          var total = (parseFloat($('.totalbread1').text()) || 0.0 ) +
                      (parseFloat($('.totalbread2').text()) || 0.0 ) +
                      (parseFloat($('.totalbread3').text()) || 0.0 );
          $('.totalprice').text(total);
      };
      $('#bread1').keyup(function(){
          $('.totalbread1').text($('#bread1').val() * 2.5); // how many of bread1, multiply with 2.5 price
          calculateTotal();
      });
      $('#bread2').keyup(function(){
          $('.totalbread2').text($('#bread2').val() * 3.5);
          calculateTotal();
      });
      $('#bread3').keyup(function(){
         $('.totalbread3').text($('#bread3').val() * 4.5);
          calculateTotal();
      });
});

JSFiddle Demo