Значение приращения в текстовые поля с помощью jQuery, как блесны

Попытка создать простой эффект спиннера с помощью Jquery, то есть две кнопки (вверх и вниз) с текстовым полем. Кнопка вверх увеличивает значение, в то время как кнопка вниз уменьшает значение. шаг приращения + или - 1.

Любые предложения в качестве пользовательского интерфейса.спиннер самый ловкий. не работает, и я новичок в jquery. затхлый быть что-то вроде $(#up).click (function ( /*SOMETHING GOES IN HERE but what?*/ )) и аналогично для #down. как установить настроить поле ввода текста проверка ИД, как указано выше.

4 4
jquery spinner onclick

4 ответа:

Может быть, что-то вроде: 

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

Демо: 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>
8

Взгляните на эту демонстрацию-я обнаружил, что она работает лучше всех, которые я пробовал

Особенно если вы используете темы пользовательского интерфейса jquery

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

6

С помощью базового кода @rfunduk я создал следующее:

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