javascript - jQuery sum up the text values from the spans - Stack Overflow

admin管理员组

文章数量:1326624

I need somehow to sum up the text values from the span, but I only can extract them and not to sum up. Is there a way to do this correctly? I got blocked about the code, I'm new to jQuery.

Demo: /

Html:

<div class="prices"> 

    <h3>Option 1 = $<span class="sum" id="option-1">11.11</span></h3>
    <h3>Option 2 = $<span class="sum" id="option-2">22.22</span></h3>
    <h3>Option 3 = $<span class="sum" id="option-3">33.33</span></h3>

</div>

<h3>Subtotal = $<span id="subtotal">0.00</span></h3>

Script:

$('.prices').each(function(){
      var sum = $('.sum').text();
      $(this).each(function(){
        sum += parseInt($('.sum').text());
      });
      $("#subtotal").text(sum);
    });

I need somehow to sum up the text values from the span, but I only can extract them and not to sum up. Is there a way to do this correctly? I got blocked about the code, I'm new to jQuery.

Demo: http://jsfiddle/0L4s6g8p/1/

Html:

<div class="prices"> 

    <h3>Option 1 = $<span class="sum" id="option-1">11.11</span></h3>
    <h3>Option 2 = $<span class="sum" id="option-2">22.22</span></h3>
    <h3>Option 3 = $<span class="sum" id="option-3">33.33</span></h3>

</div>

<h3>Subtotal = $<span id="subtotal">0.00</span></h3>

Script:

$('.prices').each(function(){
      var sum = $('.sum').text();
      $(this).each(function(){
        sum += parseInt($('.sum').text());
      });
      $("#subtotal").text(sum);
    });

• javascript
• jquery
• html

Share Improve this question Follow asked Dec 19, 2014 at 10:16 andryeshandryesh 7111 silver badge88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You need to iterate over each sum element and add it up

var sum = 0;
$('.sum').each(function() {
  sum += +$(this).text()||0;
});
$("#subtotal").text(sum);

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="prices">

  <h3>Option 1 = $<span class="sum" id="option-1">11.11</span></h3>
  <h3>Option 2 = $<span class="sum" id="option-2">22.22</span></h3>
  <h3>Option 3 = $<span class="sum" id="option-3">33.33</span></h3>

</div>

<h3>Subtotal = $<span id="subtotal">0.00</span></h3>

Its very simple! Use below code :

var total = 0;
$('.prices .sum').each(function(){
      total += parseInt($(this).text());
      $("#subtotal").text(total);
});

You just made a couple easy errors:

1. You should include the calculating script inside the subtotal function or it only gets called at loading and never again.

2. You're missing a parseInt at the first assignation of sum. As it is, sum is a string and only gets concatenations. However, it is a wrong start, you're adding one value twice.

Here's the corrected script:

var flyersprice = '0.00';

function subtotal(){

    var price = $("#quantity option:selected").attr("data-price");

    flyersprice = $("#quantity option:selected").val() * price;

    $("#flyers").text(flyersprice.toFixed(2));

    $(".paper li").click(function(){
        var selected = $(this).data("price") * $("#quantity option:selected").val();
        $("#papertype").text(selected.toFixed(2));
    });

    $("input[type=radio]").click(function(){
        var extra = $(this).data("price");
        $("#extraoptions").text(extra);
    });
    $('.prices').each(function(){
      var sum = 0.0;
      $(this).each(function(){
        sum += parseInt($('.sum').text());
      });
      $("#subtotal").text(sum);
    });
 }

You should also take out the "onchange" attributes from the html and add to the script:

$('input').change(subtotal);
$('select').change(subtotal);

It is not wrong but it is better to separate script and html.

本文标签： javascriptjQuery sum up the text values from the spansStack Overflow