javascript - 文本框的增量控件

Question

我有一些代码添加了两个按钮来增加和减少工作正常的文本框的数量。我正在尝试扩展该代码以使用多个文本框。不幸的是，文本框的名称会因页面而异，因此我使用了所有文本框共享的类名，并尝试增加最接近每个增量按钮的文本框，但我得到了文本框的值是 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);
}      

Answer 1

首先像这样绑定(bind)事件处理程序:jQuery('.increase').click(increaseQty);
您应该使用 this 关键字来仅获取按下按钮附近的文本框。
然后试试这段代码:

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

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