显示增加和减少金额的总值

时间:2018-03-07 15:47:29

标签: javascript jquery html css

我是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>

提前致谢。

4 个答案:

答案 0 :(得分:5)

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

  var total = 0;

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

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

&#13;
&#13;
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);
  
});
&#13;
body {
  width: 500px;
  margin: 0 auto;
}

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

.cart-plus-minus {
  margin-top: 20px;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

请参阅下面的工作示例。基本上,您只需要在总输入框中指定id(不是必需的,但更容易),然后在事件监听器中,计算所有三个框的总数,并将结果放入第一个输入框。 / p>

有一点需要注意:

  • 您的第三个增量框与第二个增量框具有相同的iddata-target值,导致第三个框的按钮影响第二个框中的值(在下面的解决方案中已修复)。

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);
  }
  getTotal();
});

function getTotal() {
  document.getElementById('total').value = parseInt(document.getElementById('amount-1').value) + parseInt(document.getElementById('amount-2').value) + parseInt(document.getElementById('amount-3').value);
}

getTotal();
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="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-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>

答案 2 :(得分:2)

尝试使用val() jQuery获取input值,然后使用int

转换为parseInt来添加它们

Stack Snippet

var cartButtons = $('.cart-plus-minus').find('button');
var total = parseInt($("#amount-1").val()) + parseInt($("#amount-2").val()) + parseInt($("#amount-3").val());
$("#total").val(total);
$(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);
  }
  total = parseInt($("#amount-1").val()) + parseInt($("#amount-2").val()) + parseInt($("#amount-3").val());
  $("#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 type="text" placeholder="" value="0" id="total">
</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>

答案 3 :(得分:1)

试试这个。

&#13;
&#13;
editor.on( 'instanceReady', function( e ) {
    editor.on( 'key', function( e ) { 
        console.log('test');
    });
});
&#13;
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());
  var total=parseFloat($('#total').val())
  if ($this.hasClass('cart-plus-1')){
    target.val(current + 1);
    $('#total').val(total+1);
  }
  else {
    if(current >= 2){
     target.val(current - 1);
     $('#total').val(total-1);
     }
  }
});
&#13;
body {
  width: 500px;
  margin: 0 auto;
}

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

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