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);

＆＃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;

Answer 2

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

有一点需要注意：

您的第三个增量框与第二个增量框具有相同的id和data-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>

Answer 3

尝试使用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>

Answer 4

试试这个。

＆＃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;

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

4 个答案: