Javascript 用jQuery优雅地实现增量按钮？

在我学习javascript和jQuery的玩具项目中，我需要为一些输入字段实现递增和递减按钮。我认为下面的设计应该可行，但不知为什么不行。我是否误解了jQuery，或者这是一个平庸的错误

<button type="button"  id="WS1inc" class="incbut"> + </button>  
<input type="number" id="WS1" value="1">        


function increment(field)
{
    field.val(field.val()+1);
}

$("#WS1inc").click($("#WS1"),increment);

+
函数增量（字段）
{
field.val（field.val（）+1）；
}
$（“#WS1inc”）。单击（$（“#WS1”），增量）；

控制台说对象没有方法“val（）”，所以我想我不能像这样传递jQuery对象

JSFiddle：

编辑：作为对我与Blender讨论的回应，一些更广泛的HTML：

---

这里有几个问题

field.val（）+1

将被归类为字符串串联，而不是整数递增。您需要先

parseInt（）

，才能正确计算

其次，如何调用

increment（）

是一个问题

将代码更改为：

function increment(field)
{
    field.val(parseInt(field.val(),10)+1);
}

$("#WS1inc").click(function(){
   increment($("#WS1"));
});

---

现场演示：

这是因为您没有通过该字段

你可以把电话改成

$("#WS1inc").click(function(){increment($("#WS1")});

使用

eventData

（传递给

单击
的第一个参数）时，这些数据不会作为参数直接传递给处理程序，而是在
event.data
中传递。所以你也可以这样做：

function increment(e) {
    e.data.val(parseInt(e.data.val(), 10) +1);
}
$("#WS1inc").click($("#WS1"),increment);

请注意，还必须解析字符串才能递增

关于这个
eventData
参数，我发现它更清晰：

事件发生时传递给event.Data中处理程序的数据
触发

此处演示
您的语法有点混乱。下面是一个非常详细的方法：

$("#WS1inc").click(function() {
    var $element = $("#WS1");
    var value = $element.val();
    var value_as_integer = parseInt(value, 10);

    $element.val(value_as_integer + 1);
});

您需要告诉
increment
函数它必须更改哪个元素

这可以通过使用
data
参数调用
.on（）
来完成，其中提供的参数在事件处理程序中可用为
ev.data
：

function increment(ev) {
     var el = ev.data || this;  // use the clicked element if it wasn't supplied
     el.value = parseInt(el.value, 10) + 1;
}

$('#WS1inc').on('click', document.getElementById('WS1'), increment);

注意
el.value
-在大多数情况下不需要使用
$（el.val（）
，而
el.value
的效率要高得多

请参见
传递给事件处理程序的第一个参数是事件对象。
在jquery中，事件处理程序（
this
）的上下文设置为侦听该事件的元素。。。也许您可以将其与此联系起来，并希望将您的功能更改为：

function increment(){
    var field = $(this).siblings('input');
    field.val( (+field.val() || 0) + 1);
}

这里有一个现场演示：
通用函数：


html

是的，但在这种情况下，我必须为每个增量按钮编写它（我将有几个）。虽然我当然可以做到这一点，但有没有办法只做一个增量函数呢？@Kaare：没有。这里没有正确使用
id
属性。给这些元素起一个有意义的类名，你可以稍微修改一下代码，一次考虑所有元素。我不明白。如果我有5个递增按钮和5个输入字段，每个按钮和字段都必须成对连接，那么我肯定需要为每个按钮和字段指定不同的句柄，因为按下按钮1只能递增字段1，而不能递增字段2-5？@Kaare：总有一种方法可以生成通用事件处理程序。发布你的HTML。我在原始问题中包含了一个链接。他正在增加另一个链接field@mplungjan哎呀，他就是这样！嗯，您可以使用
$（'#el'）。获取（0）
。无论如何，没有法律禁止在jQuery代码中使用本机DOM！通常它的效率更高。他正在增加另一个字段。那么，“事件数据”应该如何使用呢？顺便说一句，我假设我上面的语法与您向我展示的语法相同？@dystroy我认为我的实现更优雅；-）@可能是Alnitak，因为我主要是在解释问题。但是我不喜欢你的
|
：只有在使用时才应该这样做，因为它可能隐藏错误，而不是解决问题。@Alnitak但我同意你的观点，没有法律禁止直接使用本机函数而不是添加层来获取元素或其值。就我个人而言，我几乎从不使用
val（）。。。
function increment(){
    var field = $(this).siblings('input');
    field.val( (+field.val() || 0) + 1);
}

<button type="button"  id="WS1dec" class="but"> - </button>  
<input type="number" id="WS1" value="1">        
<button type="button"  id="WS1inc" class="but"> + </button>  
<hr/>
<button type="button"  id="WS2dec" class="but"> - </button>  
<input type="number" id="WS2" value="1">        
<button type="button"  id="WS2inc" class="but"> + </button>  

$(function() {
  $(".but").on("click",function() {
    var id=this.id;
    var fldId=id.substring(0,id.length-3);
    var inc=id.substring(id.length-3)=="inc";
    var fld = $("#"+fldId);
    var val = +fld.val();
    if (inc)val++;else val--;
    fld.val(val);
  });
});