javascript - 显示增减金额的合计值

Question

我是 jQuery 新手。我正在尝试增加和减少按钮上的 click 值。 现在我想在总 input 上显示三个输入的总和。

这是我尝试过的:

var cartButtons = $('.cart-plus-minus').find('button');
$(cartButtons).on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  var target = $this.parent().data('target');
  var target = $('#' + target);
  var current = parseFloat($(target).val());
  if ($this.hasClass('cart-plus-1'))
    target.val(current + 1);
  else {
    (current < 2) ? null: target.val(current - 1);
  }
});

body {
  width: 500px;
  margin: 0 auto;
}

a {
  text-decoration: none;
  margin-bottom: 20px;
}

.cart-plus-minus {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Increment / Decrement an 'amount' input.</h1>

<a href="" class="a-link">
  <label> Total amount is: </label>
  <input type="text" placeholder="" value="0">
</a>
<div class="cart-plus-minus" data-target="amount-1">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-1" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>

<div class="cart-plus-minus" data-target="amount-2">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-2" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>
<div class="cart-plus-minus" data-target="amount-2">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-2" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>

提前致谢。

Answer 1

您需要迭代输入并将这些输入的值添加到变量中。 然后将其设置为总计输入字段的输入值。

  var total = 0;

  $('.cart-plus-minus input').each(function(){
    total += +this.value;
  });

  $("#total").val(total);

var cartButtons = $('.cart-plus-minus').find('button');

$(cartButtons).on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  var target = $this.parent().data('target');
  var target = $('#' + target);
  var current = parseFloat($(target).val());
  if ($this.hasClass('cart-plus-1'))
    target.val(current + 1);
  else {
    (current < 2) ? null: target.val(current - 1);
  }
  
  var total = 0;
  $('.cart-plus-minus input').each(function(){
    total += +this.value;
  });
  
  $("#total").val(total);
  
});

body {
  width: 500px;
  margin: 0 auto;
}

a {
  text-decoration: none;
  margin-bottom: 20px;
}

.cart-plus-minus {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Increment / Decrement an 'amount' input.</h1>

<a href="" class="a-link">
  <label> Total amount is: </label>
  <input id="total" type="text" placeholder="" value="3">
</a>
<div class="cart-plus-minus" data-target="amount-1">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-1" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>

<div class="cart-plus-minus" data-target="amount-2">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-2" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>
<div class="cart-plus-minus" data-target="amount-3">
  <button class="btn cart-minus-1">-</button>
  <input type="number" id="amount-3" value="1" min="1" max="300">
  <button class="btn cart-plus-1">+</button>
</div>