javascript - 使用 jquery 中的每个新操作在一个 div 中显示每个 div 总金额

Question

Javascript 代码:

$(document).on('click', '#google_analytics', function() {
    if ($("#google_analytics").prop('checked') == true) {
        var google_analytics_cost = $('#google_analytics_cost').val();
        $('.total-amount12').text(google_analytics_cost);
    } else {
        $('.total-amount12').text('0');
    }
});

$(document).on('click', '#mailing_list', function() {
    if ($("#mailing_list").prop('checked') == true) {
        var mailing_cost = $('#mailing_list_cost').val();
        $('.total-amount13').text(mailing_cost);
    } else {
        $('.total-amount13').text('0');
    }
});

我只想在一个 div 中添加两个操作。名为 total-amt <div class="total-amt">0</div>在此 div 中，每当我单击任何操作时，总计应显示 total-amt div，然后，如果我单击其他操作，则其总金额也会与之前的金额相加。

Answer 1

试试这个，当你点击任何 Action 时，它会从那个 div 中获取以前的值，将它转换成整数 (parseInt)，然后它会在其中添加 newValue。最后，它将新的总和再次放入该 div 中。

编辑-1

您需要从 div 中删除 $ 字符串。试试这个工作片段。

//Action performed and Add the sum to that div
$('a').click(function(){
  //New value that is going to add into div
  var newValueToAdd = 10;
  //Replace the HTML with final summation
  $('.total-amt')
    .html("$" + 
          (parseInt($('.total-amt').html().replace('$', '')) + 
          newValueToAdd));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="total-amt">$0</div>
<a href="javascript:void(0)">Add</a>