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

这里有一些问题。

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 2

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

您可以将通话更改为

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

您需要告诉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效率更高。

请参阅http://jsfiddle.net/alnitak/W8fjX/

Answer 6

传递给事件处理程序的第一个参数是事件对象。在jquery中，事件处理程序的上下文（this）被设置为监听该事件的元素......也许你可能与之相关并可能想要将你的函数更改为：

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

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

Answer 7

通用功能：

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

用jQuery优雅实现增量按钮？

7 个答案: