I am looking to increase or decrease each products by clicking + or - button individually, but the issues is when I click any + button.. all products value is increased instead of one, same when i click - button. Kindly help me out how to do this
jquery
$(document).ready( function(){
$(".quantity-adder .add-action").click( function(){
if( $(this).hasClass('add-up') ) {
$("[name=quantity]",'.quantity-adder').val( parseInt($("[name=quantity]",'.quantity-adder').val()) + 1 );
}else {
if( parseInt($("[name=quantity]",'.quantity-adder').val()) > 1 ) {
$("input",'.quantity-adder').val( parseInt($("[name=quantity]",'.quantity-adder').val()) - 1 );
}
}
} );
});
HTML
<div class="product-extra">
<p>Product 1</p>
<div class="quantity-adder pull-left">
<div class="quantity-number pull-left">
<span>Qutantity</span>
<input type="text" name="quantity" size="2" value="1" />
</div>
<div class="quantity-wrapper pull-left">
<span class="add-up add-action fa fa-plus"></span>
<span class="add-down add-action fa fa-minus"></span>
</div>
<input type="hidden" name="product_id" size="2" value="40" />
</div>
</div>
<br />
<br />
<br />
<div class="product-extra">
<p>Product 2</p>
<div class="quantity-adder pull-left">
<div class="quantity-number pull-left">
<span>Qutantity</span>
<input type="text" name="quantity" size="2" value="1" />
</div>
<div class="quantity-wrapper pull-left">
<span class="add-up add-action fa fa-plus"></span>
<span class="add-down add-action fa fa-minus"></span>
</div>
<input type="hidden" name="product_id" size="2" value="44" />
</div>
</div>
<br />
<br />
<br />
<div class="product-extra">
<p>Product 3</p>
<div class="quantity-adder pull-left">
<div class="quantity-number pull-left">
<span>Qutantity</span>
<input type="text" name="quantity" size="2" value="1" />
</div>
<div class="quantity-wrapper pull-left">
<span class="add-up add-action fa fa-plus"></span>
<span class="add-down add-action fa fa-minus"></span>
</div>
<input type="hidden" name="product_id" size="2" value="48" />
</div>
</div>
<br />
<br />
<br />
<div class="product-extra">
<p>Product 4</p>
<div class="quantity-adder pull-left">
<div class="quantity-number pull-left">
<span>Qutantity</span>
<input type="text" name="quantity" size="2" value="1" />
</div>
<div class="quantity-wrapper pull-left">
<span class="add-up add-action fa fa-plus"></span>
<span class="add-down add-action fa fa-minus"></span>
</div>
<input type="hidden" name="product_id" size="2" value="55" />
</div>
</div>
<br />
<br />
<br />
demo link https://jsfiddle.net/sjyq64mj/
$(document).ready(function () {
$(".quantity-adder .add-action").click(function () {
if ($(this).hasClass('add-up')) {
var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
text.val(parseInt(text.val()) + 1);
} else {
var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
if (parseInt(text.val()) > 1) {
text.val(parseInt(text.val()) - 1);
}
}
});
});
I added the .parent()
so that then find the proper text to increase
You need to select the correct control and increase/decrease the value. This can easily be done by using closest to go to the common parent div and then using find to select the correct control.
$(document).ready(function () {
$(".quantity-adder .add-action").click(function () {
var ctrl = $(this).closest('.quantity-adder').find("[name=quantity]", '.quantity-adder');
if ($(this).hasClass('add-up')) {
$(ctrl).val(parseInt($(ctrl).val()) + 1);
} else {
if (parseInt($(ctrl).val()) > 1) {
$(ctrl).val(parseInt($(ctrl).val()) - 1);
}
}
});
});
Alternatively you can use <input type='number' min='1' value='1' />
for modern browsers (no need of any javascript)
Working fiddle link : https://jsfiddle.net/sjyq64mj/5/
$(document).ready( function(){
$(".quantity-adder .add-action").click( function(){
var qtyField = $(this).closest('.quantity-adder').find("[name=quantity]");
if( $(this).hasClass('add-up') ) {
qtyField.val( parseInt(qtyField.val()) + 1 );
}else {
if( parseInt(qtyField.val()) > 1 ) {
qtyField.val( parseInt(qtyField.val()) - 1 );
}
}
} );
});
Try with closest()
:
//quantity text - box finder var qty = function(el) { return $(el).closest('div.quantity-adder').find('input[type=text][name=quantity]').eq(0); }; var plus = function(e) { var q = qty(this); q.val(1 + (+q.val() || 0)); }; var minus = function(e) { var q = qty(this); var v = (+q.val() || 0) - 1; if (1 > v) v = 1; q.val(v); }; $(function() { $('span.fa-plus').on('click', plus); $('span.fa-minus').on('click', minus); });
.pull-left { float: left; } span.fa-plus:after { content: "+"; } span.fa-minus:after { content: "-"; } span.add-action { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="product-extra"> <p>Product 1</p> <div class="quantity-adder pull-left"> <div class="quantity-number pull-left"> <span>Qutantity</span> <input type="text" name="quantity" size="2" value="1" /> </div> <div class="quantity-wrapper pull-left"> <span class="add-up add-action fa fa-plus"></span> <span class="add-down add-action fa fa-minus"></span> </div> <input type="hidden" name="product_id" size="2" value="40" /> </div> </div> <br /> <div class="product-extra"> <p>Product 2</p> <div class="quantity-adder pull-left"> <div class="quantity-number pull-left"> <span>Qutantity</span> <input type="text" name="quantity" size="2" value="1" /> </div> <div class="quantity-wrapper pull-left"> <span class="add-up add-action fa fa-plus"></span> <span class="add-down add-action fa fa-minus"></span> </div> <input type="hidden" name="product_id" size="2" value="44" /> </div> </div> <br /> <div class="product-extra"> <p>Product 3</p> <div class="quantity-adder pull-left"> <div class="quantity-number pull-left"> <span>Qutantity</span> <input type="text" name="quantity" size="2" value="1" /> </div> <div class="quantity-wrapper pull-left"> <span class="add-up add-action fa fa-plus"></span> <span class="add-down add-action fa fa-minus"></span> </div> <input type="hidden" name="product_id" size="2" value="48" /> </div> </div> <br /> <div class="product-extra"> <p>Product 4</p> <div class="quantity-adder pull-left"> <div class="quantity-number pull-left"> <span>Qutantity</span> <input type="text" name="quantity" size="2" value="1" /> </div> <div class="quantity-wrapper pull-left"> <span class="add-up add-action fa fa-plus"></span> <span class="add-down add-action fa fa-minus"></span> </div> <input type="hidden" name="product_id" size="2" value="55" /> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.