使用多个输入值 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() {&nbsp; $('.addcop').click();&nbsp; var dp = $(".addcop").val();&nbsp; var total = $(".totalyHide").val();&nbsp; var bigTotal = parseFloat(total) + parseFloat(dp);&nbsp; $(".totalyHide").val(bigTotal); // Add this line here&nbsp; $(".totaly").val("$" + bigTotal);});$('.add2').click(function() {&nbsp; $('.procurement').click();&nbsp; var procurement = $(".procurement").val();&nbsp; var total = $(".totalyHide").val();&nbsp; var bigTotal = parseFloat(total) + parseFloat(procurement);&nbsp; $(".totalyHide").val(bigTotal); // Add this line here&nbsp; $(".totaly").val("$" + bigTotal);});这里要注意的是，无论何时计算总计，都必须将该总计设置为 $(".totalyHide")，以便您可以在下次单击时读取更新后的值。