Question

我需要以某种方式总结跨度中的文本值，但我只能提取它们而不是总结。有没有办法正确地做到这一点？我被封锁了代码，我是jQuery的新手。

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>

脚本：

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

Answer 1

您需要遍历每个sum元素并将其添加

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

<script src="https://ajax.googleapis.com/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>

Answer 2

非常简单！使用以下代码：

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

Answer 3

你刚刚犯了一些简单的错误：

您应该在小计函数中包含计算脚本，否则它只会在加载时调用，而不会再次调用。
您在第一次分配总和时错过了一个parseInt。实际上，sum是一个字符串，只能获得连接。但是，这是一个错误的开始，您需要两次添加一个值。

以下是更正后的脚本：

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

您还应该取出＆＃34; onchange＆＃34;来自html的属性并添加到脚本中：

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

没错，但最好将脚本和HTML分开。

jQuery总结了跨度的文本值

3 个答案:

非常简单！使用以下代码：