videos - Incrementa el valor de textinput con jquery como spinner

videos de dude perfect

Question

Tratando de crear un efecto spinner simple con Jquery, es decir, dos botones (arriba y abajo) con un campo de texto. El botón up aumenta el valor mientras que el botón down decrementa el valor. incremente los pasos + o - 1.

Cualquier sugerencia como ui.spinner es más def. no funciona y soy nuevo en jquery. debe ser algo así como $(#up).click (function ( /*SOMETHING GOES IN HERE but what?*/ )) y también para #down. ambos para ajustar ajustar el campo de texto de entrada dicen ID #test como se indica arriba.

Answer 1

Echa un vistazo a esta demostración: he encontrado que esta es la mejor de todas las que he probado

Especialmente si estás usando temas de jquery ui

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

Answer 2

Demostración: 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

Tal vez algo así como:

$(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 4

Con el código base de @rfunduk, creé esto:

$(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 );
    } );
} );