how to sum values in jquery with realtime calculation

问题

I have this piece of code which i use for a realtime calculation.

$(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);
    });

});

How can i, on the same way calculate the realtime totalprice of all these, lets say in:

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

回答1:

Try this : write a function to calculate total and call it in each keyup event of every textbox as shown below.

$(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

回答2:

Try this..

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

回答3:

$('.totalbread1').text(parseFloat($('#bread1').val()) * 2.5);

来源：https://stackoverflow.com/questions/29515502/how-to-sum-values-in-jquery-with-realtime-calculation

标签

javascript

jquery