Inkrementwert von TextInput- mit jquery wie Spinner

Question

Der Versuch, einen einfachen Spinner-Effekt mit JQuery, das heißt zwei Tasten (nach oben und unten) mit einem Textfeld zu erstellen. Der UpButton erhöht den Wert, während die nach unten, um den Wert decreses. Schritt Schritte + oder -. 1

Irgendwelche Vorschläge wie ui.spinner ist am def. nicht funktioniert und ich bin neu in Jquery. muffig so etwas wie $(#up).click (function ( /*SOMETHING GOES IN HERE but what?*/ )) und ebenfalls für #down. beide Satz einstellen Eingabetextfeld sagen id #test wie oben.

Answer 1

Vielleicht so etwas wie:

$(document).ready( function() {
  var el = $('#test');
  function change( amt ) {
    el.val( parseInt( el.val(), 10 ) + amt );
  }

  $('#up').click( function() {
    change( 1 );
  } );
  $('#down').click( function() {
    change( -1 );
  } );
} );

Answer 2

Demo: http://jsbin.com/akiki

<button id="inc">+</button>
<button id="dec">-</button>
<input type="text" name="qty" value="0" />

<script type="text/javascript">
  $(function(){
    $("#inc").click(function(){
      $(":text[name='qty']").val( Number($(":text[name='qty']").val()) + 1 );
    });
    $("#dec").click(function(){
      $(":text[name='qty']").val( Number($(":text[name='qty']").val()) - 1 );
    });
  });
</script>

Answer 3

Haben Sie einen Blick auf diese Demo - Ich habe festgestellt, dass dies die beste aller diejenigen Werke, die ich versucht habe,

Vor allem, wenn Sie mit jQuery UI Themen

http://btburnett.com/spinner/example/example.html

Answer 4

Mit dem Basiscode von @rfunduk Ich habe diese:

$(document).ready( function() {

    var el = $('#quantity_wanted');

    function change( amt ) {

        if (el.val() == '') {
            var newValue = 1;
        } else {
            var newValue = parseInt( el.val(), 10 ) + amt;
        }

        if (newValue > 0) {
            el.val( newValue );
        }

    }

    $('#cart_quantity_up').click( function() {
        change( 1 );
    } );

    $('#cart_quantity_down').click( function() {
        change( -1 );
    } );
} );