文本框的增量控件

时间:2014-08-19 06:34:34

标签: javascript jquery css

我有一些代码添加了两个按钮来增加和减少工作正常的文本框的数量。我正在尝试扩展该代码以使用多个文本框。不幸的是,文本框的名称会因页面而异,所以我使用的是所有文本框共享的类名,并尝试增加最接近每个增量按钮的文本框但我得到了NaN表示文本框的值。

奇怪的是,它不会产生任何错误。 NaN来自console.log行。

如果有人能指出我正确的方向,我会非常感激......

单一实例(工作):http://codepen.io/Realto619/pen/iaCAb

多个实例(不是......):http://codepen.io/Realto619/pen/ytpCF

function increaseQty(e) {
    console.log("jQuery('.qty').prev().val() = " + jQuery('.qty').prev().val());
    var qtyTotal = parseInt(jQuery('.qty').prev().val());
    jQuery('.qty').prev().val(parseInt(jQuery('.qty').prev().val())+1);
}      

1 个答案:

答案 0 :(得分:0)

首先绑定事件处理程序,如下所示:jQuery('.increase').click(increaseQty);
您应该使用this关键字仅获取按下按钮附近的文本框 然后尝试以下代码:

function increaseQty(e) {
    var tb = jQuery(this).closest('input');
    tb.val(parseInt(tb.val()) + 1);
}

closest()函数搜索与选择器匹配的最近父元素。