使这个增量/减量与 jQuery 中的多个输入一起工作

Question

我在选择输入时遇到了一些麻烦。基本上，我需要按钮来增加或减少同一元素中包含的单个输入的值。

这是 HTML：

<div>
    <label for="name">Adult Males</label>
    <div class="dec button">-</div>
    <input type="text" name="qty" id="1" value="0" />
    <div class="inc button">+</div>
</div>
<div>
    <label for="name">Adult Females</label>
    <div class="dec button">-</div>
    <input type="text" name="adult-female" id="2" value="0"/>
    <div class="inc button">+</div>
</div>

...和 ​​jQuery：

var incrementVar = 0;

$(function() {
    $(".inc").click(function() {
        var newValue = parseInt($(":input[name='qty']").val()) + 1;
        $(":input[name='qty']").val(newValue);
        $('.inc').addClass('a' + newValue);
        incrementVar = incrementVar + newValue;
    });
    $(".dec").click(function() {
        var newValue = parseInt($(":input[name='qty']").val()) - 1;
        $(":input[name='qty']").val(newValue);
        $('.inc').addClass('a' + newValue);
        incrementVar = incrementVar + newValue;
    });
});

这有效，但目前仅适用于成年男性。我希望按钮能够定位同一 div 中包含的输入。

Answer 1

incrementVar = 0;
$('.inc.button').click(function(){
    var $this = $(this),
        $input = $this.prev('input'),
        $parent = $input.closest('div'),
        newValue = parseInt($input.val(), 10)+1;
    $parent.find('.inc').addClass('a'+newValue);
    $input.val(newValue);
    incrementVar += newValue;
});
$('.dec.button').click(function(){
    var $this = $(this),
        $input = $this.next('input'),
        $parent = $input.closest('div'),
        newValue = parseInt($input.val(), 10)-1;
    $parent.find('.inc').addClass('a'+newValue);
    $input.val(newValue);
    incrementVar += newValue;
});

演示

Answer 2

这是一些可以为您完成此操作的代码。关键是转到所单击按钮的父级并找到该父级中的输入。这将为您找到合适的手术对象。我还进行了这些更改/改进：

1. 我将所有代码放在递增和递减都可以调用的函数中。
2. 我将基数添加到了 parseInt() 中，除非您希望它猜测，否则这是必需的。
3. 我这样做是为了使减量不能使其低于零。
4. 我将输入元素上的 id 值修复为合法值（id 不能以数字开头）。

这是新代码：

$(".inc").click(function() {
    updateValue(this, 1);
});
$(".dec").click(function() {
    updateValue(this, -1);
});

function updateValue(obj, delta) {
    var item = $(obj).parent().find("input");
    var newValue = parseInt(item.val(), 10) + delta;
    item.val(Math.max(newValue, 0));
}

这里的工作示例： http://jsfiddle.net/jfriend00/Y6tFj/

I删除了类更改，因为它们对我来说没有意义，因为您不断向所有增量/减量按钮添加新类，我认为这无法完成您想要做的任何事情。

我也不知道你想用incrementVar 做什么。

Answer 3

您可以使用 prev() 和 next() 查找元素，而不是使用选择器。

查看实际操作：http://jsfiddle.net/william/t4Np7/1/。

Answer 4

成年女性部分内的输入元素名为 adult-female，而不是 qty。您可以调整选择器以使用 jQuery 的 next ala $(this).next(":input")。

Answer 5

您可以使用：

var input = $(this).siblings(":input[name='qty']").get(0)

然后

var newValue = parseInt(input.value) + 1;
$(input).val(newValue);

Answer 6

使用

 var newValue = parseInt( $(this).prev(":input[name='qty']").val()) + 1;

而不是

 var newValue = parseInt($(":input[name='qty']").val()) + 1;

和

使用

 var newValue = parseInt( $(this).next(":input[name='qty']").val()) - 1;

而不是

 var newValue = parseInt($(":input[name='qty']").val()) - 1;

参考：

• .prev 的文档()

• .next()