Plus/minus incrementator in Jquery, how to generalize?

Question

I\'m using this code

-
   0
+
<         


        

Answer 1

try this one if this helps:

i have changed a little bit i used classes .plus, .minus instead of ids #plus, #minus

 $('.plus').click(function() {
    var sp = parseFloat($(this).prev('span').text());
    $(this).prev('span').text(sp + 1);
 });

 $('.minus').click(function() {
    var sp = parseFloat($(this).next('span').text());
    $(this).next('span').text(sp - 1);
 });

check this out in fiddle: http://jsfiddle.net/L2UPw/

Answer 2

If you want to genericise your code, then best method would be to use a single class on both elements that affect the value, but add a data attribute which is the factor to adjust the amount to add/remove. You can then wrap the controls in a single containing div to make DOM traversal easier.

By using this pattern you can have multiple instances of the control on the page, with all buttons governed by a single click handler. Try this:

$('.value-amender').click(function() {
  var $el = $(this);
  $el.closest('.amender-container').find('.value').text(function(i, t) {
    return parseInt(t, 10) + (1 * $el.data('factor'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amender-container">
  <a class="value-amender" href="#" data-factor="-1">-</a>
  <span class="value">0</span>
  <a class="value-amender" href="#" data-factor="1">+</a>
</div>

<div class="amender-container">
  <a class="value-amender" href="#" data-factor="-1">-</a>
  <span class="value">0</span>
  <a class="value-amender" href="#" data-factor="1">+</a>
</div>

Answer 3

Put them inside a container like

<span class="stepper">
   <dec>-</dec>
   <span>0</span>
   <inc>+</inc>
</span>

This way you can select the display relatively without too much trouble like

$(this).parent().children("span");

in the respective click handlers.

Answer 4

Use a class instead of an ID in your selector

$('.minus').bind('click', {increment: -1}, incrementValue);

and

< a id="minus1" class="minus" href="#">-< /a>
...
< a id="minus150" class="minus" href="#">-< /a>