All geek questions in one place

Increasing and decreasing input values ​​using jquery

I need to increase and decrease the value of the inputs when pressing the + and - buttons, but it does not work. I got the code from this post: How to increase the value of the quantity field using jQuery? When you click on the add button, I inserted the console.log statement to debug the target, and surprisingly, I get a value of 3, even if I clicked the button with id add1. It would be very appreciated if you could point out a mistake, thanks!

HTML:

<body> <p> <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20"> <input id="qty1" type="text" value="1"> <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20"> </p> <p> <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20"> <input id="qty2" type="text" value="1"> <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20"> </p> </body>

JQuery

 $(function () { var numButtons = 2; //console.log(typeof(numButtons)); //console.log(numButtons); for (var i = 1; i <= numButtons; i++) { $("#add" + i).click(function () { console.log(i); var currentVal = parseInt($("#qty" + i).val()); //console.log(currentVal); if (!isNaN(currentVal)) { $("#qty" + i).val(currentVal + 1); } }); $("#minus" + i).click(function () { var currentVal = parseInt($("#qty" + i).val()); if (!isNaN(currentVal) && currentVal > 0) { $("#qty" + i).val(currentVal - 1); } }); } });

jsfiddle - http://jsfiddle.net/hMS6Y/

+6
source share
6 answers

Try this in a simple way using class ,

HTML

 <body> <p> <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus"/> <input id="qty1" type="text" value="1" class="qty"/> <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/> </p> <p> <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus"/> <input id="qty2" type="text" value="1" class="qty"/> <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/> </p> </body>

SCRIPT

 $(function () { $('.add').on('click',function(){ var $qty=$(this).closest('p').find('.qty'); var currentVal = parseInt($qty.val()); if (!isNaN(currentVal)) { $qty.val(currentVal + 1); } }); $('.minus').on('click',function(){ var $qty=$(this).closest('p').find('.qty'); var currentVal = parseInt($qty.val()); if (!isNaN(currentVal) && currentVal > 0) { $qty.val(currentVal - 1); } }); });

Fiddle: http://jsfiddle.net/hMS6Y/2/

Alternatively, you can shorten your code,

 $(function() { $('.minus,.add').on('click', function() { var $qty = $(this).closest('p').find('.qty'), currentVal = parseInt($qty.val()), isAdd = $(this).hasClass('add'); !isNaN(currentVal) && $qty.val( isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal) ); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <p> <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus" /> <input id="qty1" type="text" value="1" class="qty" /> <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add" /> </p> <p> <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus" /> <input id="qty2" type="text" value="1" class="qty" /> <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add" /> </p>
+11
source

The problem is that the value of i is 3 at the end of the loop. What you want to do is save the value of each iteration so that when the click event fires, it still holds the correct value (the value during the event posting). One way to do this is through what is called closure. The closure is mostly close to the value and saves the function call with the value used for calling later. One way to achieve this is with the factory function.

 function add(value){ console.log(value); var currentVal = parseInt($("#qty" + value).val()); if (!isNaN(currentVal)) { $("#qty" + value).val(currentVal + 1); } }; function addClosure(value){ return function(){ add(value); }; };

At this point, all you have to do is change the click event as follows:

 $("#add" + i).click(addClosure(i));

JSFiddle: http://jsfiddle.net/infiniteloops/y9huk/

Closing MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

+1
source

Your i variable is global in case it really works for # add3, # minus3. Here in the code, you can try this thing -

 $(function () { var numButtons = 2; //console.log(typeof(numButtons)); //console.log(numButtons); for (var i = 1; i <= numButtons; i++) { var t = i; //Now t is local $("#add" + t).click(function () { console.log(t); var currentVal = parseInt($("#qty" + t).val()); //console.log(currentVal); if (!isNaN(currentVal)) { $("#qty" + t).val(currentVal + 1); } }); $("#minus" + t).click(function () { var currentVal = parseInt($("#qty" + t).val()); if (!isNaN(currentVal) && currentVal > 0) { $("#qty" + t).val(currentVal - 1); } }); } });

Hope this helps.

0
source

in for cycle i value becomes 3

Demo

 $(function () { $("#add1").click(function () { add(1); }); $("#minus1").click(function () { minus(1); }); $("#add2").click(function () { add(2); }); $("#minus2").click(function () { minus(2); }); }); function add(i){ var currentVal = parseInt($("#qty" + i).val()); if (!isNaN(currentVal)) { $("#qty" + i).val(currentVal + 1); } } function minus(i){ var currentVal = parseInt($("#qty" + i).val()); if (!isNaN(currentVal) && currentVal > 0) { $("#qty" + i).val(currentVal - 1); } }
0
source

Working code.

 <body> <div id='placeholder'> <p> <img src="http://i.imgur.com/yOadS1c.png" act='min' id="1" width="20" height="20" /> <input id="qty1" type="text" value="1"> <img src="http://i.imgur.com/98cvZnj.png" act='add' id="1" width="20" height="20" /> </p> <p> <img src="http://i.imgur.com/yOadS1c.png" act='min' id="2" width="20" height="20" /> <input id="qty2" type="text" value="1"> <img src="http://i.imgur.com/98cvZnj.png" act='add' id="2" width="20" height="20" /> </p> </div> </body> $(function () { $('#placeholder img').each(function(){ $(this).click(function(){ $action = $(this).attr('act'); $id = $(this).attr('id'); $val = parseInt($('#qty'+$id).val()); if($action == 'add'){ $val = $val + 1; } else { if($val > 0){ $val = $val - 1; } } $('#qty'+$id).val($val); }); }); });
0
source 
 <div class="box-qty"> <a href="javascript:void(0);" class="quantity-minus">-</a> <input type="text" name="p_quantity" id="qnt" class="quantity" value="1"> <a href="javascript:void(0);" class="quantity-plus">+</a> </div> <script> $(".quantity-plus").click(function(){ $("#qnt").val(Number($("#qnt").val())+1); }); $(".quantity-minus").click(function(){ if($("#qnt").val()>1) $("#qnt").val(Number($("#qnt").val())-1); }); <script>
0
source

Source: https://habr.com/ru/post/955072/

More articles:


All Articles