我是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>
提前致谢。
答案 0 :(得分:5)
您需要迭代输入并将这些值添加到变量中。 然后将其设置为总输入字段的输入值。
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);
});
&#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;
答案 1 :(得分: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>
答案 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)
试试这个。
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;