使用 jquery 像微调器一样增加 textinput 的值答案

【问题标题】：Increment value of textinput with jquery like spinner使用 jquery 像微调器一样增加 textinput 的值
【发布时间】：2011-01-05 01:40:49
【问题描述】：

尝试使用 Jquery 创建一个简单的微调器效果，即两个按钮（向上和向下）和一个文本字段。向上按钮增加值，而向下按钮减少值。递增步数 + 或 - 1。

作为 ui.spinner 的任何建议都是最明确的。不工作，我是 jquery 的新手。发霉的东西 $(#up).click (function ( /*SOMETHING GOES IN HERE but what?*/ )) 和#down 也是如此。两者都设置调整输入文本字段说 id #test 如上。

【问题讨论】：

欢迎来到 StackOverflow，Russell！

标签： jquery onclick spinner increment

【解决方案1】：

演示：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>

【讨论】：

【解决方案2】：

可能是这样的：

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

【讨论】：

感谢 thennduks 很不错，但是 ummm... 愚蠢的现在忘了添加一些东西，如何以同样的方式上/下
- 列表 - 抱歉
@russel：不明白你的意思……“上”/下一个列表？
在一个页面上使用多个是微不足道的。首先将#up 和#down id 更改为.up 和.down，而不仅仅是change(1) 并在函数中使用el，您可以找到并传递目标元素...容易。

【解决方案3】：

看看这个演示 - 我发现这是我尝试过的所有演示中效果最好的

特别是如果您使用的是 jquery ui 主题

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

【讨论】：

【解决方案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 );
    } );
} );

【讨论】：