Jquery Plus/Minus Incrementer

Question

I want to have a client side Plus / Minus system where a user can click the plus and a value is incremented by 1, minus and the value is decreased by 1, the value should never go below zero and should start on 0. Is there a way to do this simply in jquery? All the jquery plugins look at bit OTT for this operation.

Any help appreciated, ta.

Answer 1

var currentValue = 0;

$(document).ready(function() {
  $('#up').click(function() {
    currentValue++;
  });
  $('#down').click(function() {
    if (currentValue > 0) {
      currentValue--;
    }
  });
});

Putting currentValue in a textfield or other element would then be trivial.

Answer 2

something like this:

HTML:

<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);

    });

Edit: Optimized code

Answer 3

<span id="value">5</span>
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />

$('#plus').click(function() { changeValue(1); });
$('#minus').click(function() { changeValue(-1); });

function changeValue(val) {
    var container = $('#value');
    var current = parseInt(container.html(), 10);

    container.html(Math.max(0, current + val).toString());
}

Answer 4

Sure you can, e.g.:

<span id="minus>-</span>
<span id="value">0</span>
<span id="plus">+</span>

<script type="text/javascript">  
   $(function() {
      var value = parseInt($('#value').text(value));

      $('#minus').click(function() {
         if (value == 0) return;
         value--;
         $('#value').text(value);
      }

      $('#plus').click(function() {
         value++;
         $('#value').text(value);
      }
  });
</script>

Answer 5

The jquery part

// initialize counter
var counter = 0;

// set the + functionality
$('#plus').click( function(){$('#display').html( ++counter )} );
// set the - functionality
$('#minus').click( function(){$('#display').html( (counter-1<0)?counter:--counter )} );
// initialize display
$('#display').html( counter );

and the html part

<span id="plus">+</span>
<span id="minus">-</span>
<div id="display"></div>

Answer 6

JQuery SpinButton Control

Answer 7

This is actually built into jQuery - http://docs.jquery.com/UI/Spinner