2

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

4

7 回答 7

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/

于 2013-02-25T09:50:34.053 回答
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论点，我发现文档on更清晰：

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

于 2013-02-25T09:50:45.080 回答
2 
$("#WS1inc").click(function(){
     $("#WS1").val(parseInt($("#WS1").val())+1);
});

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

于 2013-02-25T09:50:47.030 回答
1

你把语法弄混了一点。这是一种超级详细的方法：

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

    $element.val(value_as_integer + 1);
});
于 2013-02-25T09:50:58.160 回答
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

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

于 2013-02-25T09:52:24.093 回答
1

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

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

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

于 2013-02-25T09:53:03.133 回答
1

通用功能：

演示

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);
  });
});
于 2013-02-25T09:59:07.407 回答