使用多个输入值 Javascript 进行多次添加

Question

我在一个 div 中创建了很多数字。每次有人点击一个数字时，我都想将其添加到另一个 div。让我用一些例子来说明：当用户点击add类时，.addcop应该将 的值添加到 的值.totalyHide。这意味着该值应更改为12.当我点击 时，.add2值应该被添加到 上12，因此 的值.totalyhide变为32.80。和其他条款，如果我点击第一个 + 并点击第二个 +，它们应该在 Yearly Price 上加在一起。我希望你明白我想做什么。$('.add').click(function() {  $('.addcop').click();  var dp = $(".addcop").val();  var total = $(".totalyHide").val();  var bigTotal = parseFloat(total) + parseFloat(dp);  $(".totaly").val("$" + bigTotal);});$('.add2').click(function() {  $('.procurement').click();  var procurement = $(".procurement").val();  var total = $(".totalyHide").val();  var bigTotal = parseFloat(total) + parseFloat(procurement);  $(".totaly").val("$" + bigTotal);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"><div class="box box6">  <div class="titlet">work on it    <hr>  </div>  <div class="explain">to help you better</div>  <div class="money">    <p class="me">$12 Yearly</p><i class="add fas fa-plus-square fa-2x"></i></div>  <input type="text" name="content" class="addcop" style="display: none;" value="12"></div><div class="box box5">  <div class="titlet">Procurement    <hr>  </div>  <div class="explain"></div>  <div class="money">    <p class="me">$20.80 Yearly</p><i class="add2 fas fa-plus-square fa-2x"></i></div>  <input type="text" class="procurement" style="display: none;" value="20.80"></div>

Answer 1

您编写的 JQuery 代码存在一个小问题。您可以添加以下更改以获得所需的结果。

$('.add').click(function() {

  $('.addcop').click();

  var dp = $(".addcop").val();

  var total = $(".totalyHide").val();

  var bigTotal = parseFloat(total) + parseFloat(dp);

  $(".totalyHide").val(bigTotal); // Add this line here

  $(".totaly").val("$" + bigTotal);

});

$('.add2').click(function() {

  $('.procurement').click();

  var procurement = $(".procurement").val();

  var total = $(".totalyHide").val();

  var bigTotal = parseFloat(total) + parseFloat(procurement);

  $(".totalyHide").val(bigTotal); // Add this line here

  $(".totaly").val("$" + bigTotal);

});

这里要注意的是，无论何时计算总计，都必须将该总计设置为 $(".totalyHide")，以便您可以在下次单击时读取更新后的值。