Plus/minus incrementator in Jquery, how to generalize?

Question

I'm using this code

<a id="minus" href="#">-</a>
   <span id="VALUE">0</span>
<a id="plus" href="#">+</a>

Javascript:

$(function(){

    var valueElement = $('#VALUE');
    function incrementValue(e){
        valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment, 0));
        return false;
    }

    $('#plus').bind('click', {increment: 1}, incrementValue);

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

});

to have a plus/minus incrementator of the filed named "VALUE". Now, i have a form using this containing 150 field like this... there's a way to generalize this code passing in some way to the function the name of the field that the user is incrementing/decrementing? Otherwise, i have to replicate this code 150 times...

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

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 3

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>

Answer 4

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>