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

Question

我在 div 中创建了很多数字。每次有人点击一个数字时，我都想将其添加到另一个 div。让我用一些例子来说明：

当用户单击 add class 时，.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"> 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">.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>
<div class="box box8">
  <div class="total">Your First Deposit will be: <input class="total1" type="button" value="6"></div>
  <input type="text" class="totalHide" style="display: none;" value="546">
  <div class="total">Yearly Price: <input onchange="myFunction()" class="totaly" type="button" value="[=12=]"></div>
  <input type="text" class="totalyHide" style="display: none;" value="0">
  <div class="total">On-off Price: <input class="total" type="button" value="6"></div>
  <input type="text" class="total" style="display: none;" value="546">
</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")，以便您可以在下次单击时读取更新后的值。

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

Make multiple additions with multiple input value Javascript

html

javascript

jquery

jquery-events