时间戳

首页 > 解决方案 > 点击计算总和并追加总和？

javascript - 点击计算总和并追加总和？

问题描述

我想计算一些 DIV 框中的数字并将总数附加到另一个 DIV 中。

当另一个函数动态地将值添加到框中时，如何在单击框类时使其工作？

我尝试了各种混乱的方式，比如将整个代码包装在window.onclick. https://jsfiddle.net/esw6dbLn/1/

var total =0;
$('.box > .box_content > .box_price').each(function(){
  total += parseInt($(this).text());
});
$('.container').append("<div class='sum'>Total : "+total+"</div>");
console.log(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div class="container">
<div class="box">
    <div class="box_content">
        <div class="box_price">100</div>
    </div>
</div>
<div class="box">
    <div class="box_content">
        <div class="box_price">200</div>
    </div>
</div>
</div>

标签： javascripthtmljquery

解决方案

您可以click在 div 上使用事件，box_price然后获取被单击的div 的sum值，并且 div 值添加它们并将它们显示在您的sumdiv 中。

演示代码： 

var total = 0;
$('.box > .box_content > .box_price').each(function() {
  total += parseInt($(this).text());
});
$('.container').append("<div class='sum'>Total :<span> " + total + "</span></div>");
console.log(total);

$(".box_price").click(function() {
  //get price which is clicked then add with sum
  var price = parseInt($(this).text()) + parseInt($(".sum span").text().trim())
  $(".sum span").text(price) //display in span
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="box">
    <div class="box_content">
      <div class="box_price">100</div>
    </div>
  </div>
  <div class="box">
    <div class="box_content">
      <div class="box_price">200</div>
    </div>
  </div>
</div>

推荐阅读