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

Question

在我学习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);

控制台说对象没有方法“val()”，所以我猜我不能像这样传递jQuery对象？

JSFiddle：http://jsfiddle.net/MycnR/

编辑：为了回应我与 Blender 的讨论，一些更广泛的 HTML： http://jsfiddle.net/4ELhf/

Answer 1

那是因为你没有通过该领域。

您可以将调用更改为

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

当您使用eventData（传递给click 的第一个参数）时，这些数据不会作为参数直接传递给处理程序，而是传递给event.data。所以你也可以这样做：

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

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

关于eventData这个说法，我发现the documentation of on更清楚：

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

Answer 2

这里有几个问题。

field.val()+1 将被归类为字符串连接而不是整数增量。您需要先parseInt() 才能正确计算。

其次，您调用increment() 的方式存在问题。

将您的代码更改为：

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

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

现场演示： http://jsfiddle.net/MycnR/2/

Answer 3

$("#WS1inc").click(function(){
     $("#WS1").val(parseInt($("#WS1").val())+1);
});

在这里演示http://jsfiddle.net/MycnR/1/

Answer 4

你的语法有点混乱。这是一种超级详细的方法：

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

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

Answer 5

通用函数：

DEMO

html

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

jQuery

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

Answer 6

传递给事件处理程序的第一个参数是事件对象。 在 jquery 中，事件处理程序 (this) 的上下文设置为侦听该事件的元素...也许您可以与此相关并且可能希望将您的函数更改为：

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

这是一个现场演示：http://jsfiddle.net/MycnR/5/

Answer 7

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

这可以使用.on() 调用的data 参数来完成，其中提供的参数在事件处理程序中以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 的效率要高得多。

见http://jsfiddle.net/alnitak/W8fjX/