스피너와 같은 jQuery를 사용한 TextInput의 증분 값

Question

jQuery를 사용하여 간단한 스피너 효과를 만들려고, 즉 텍스트 필드가있는 두 개의 버튼 (위와 아래). Upbutton은 값을 증가시키는 반면 다운 버튼은 값을 감소시킵니다. 증분 단계 + 또는 -1.

UI.spinner로서의 모든 제안은 가장 def입니다. 일하지 않고 jQuery를 처음 사용합니다. 곰팡이는 같은 것입니다$(#up).click (function ( /*SOMETHING GOES IN HERE but what?*/ )) #Down과 마찬가지로. 둘 다 입력 텍스트 필드를 조정하려면 위와 같이 id #test를 말하십시오.

Answer 1

아마도 :

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

데모: 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

이 데모를 살펴보십시오 - 나는 이것이 내가 시도한 모든 것 중에서 가장 잘 작동한다는 것을 알았습니다.

특히 jQuery UI 테마를 사용하는 경우

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

Answer 4

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