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

这里有一些代码可以帮到你。关键是要转到单击按钮的父级，找到该父级的输入。这将使你得到正确的操作。我也做了这些改变/改进：

我把所有代码放在一个函数中，递增和递减都可以调用。
我将基数添加到parseInt()这是必需的，除非你想猜它。
我做到了，所以减量不能低于零。
我将输入元素上的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/

我删除了类更改，因为它们对我没有意义，因为你不断向所有递增/递减按钮添加新类，我认为这些按钮不会完成你想要做的任何事情。

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

Answer 2

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

Demo

Answer 3

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

Answer 4

使用

 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;

价：

Documentation for .prev()

Documentation for .next()

Answer 5

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

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

Answer 6

您可以使用：

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

然后

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

使这个增量/减量在jQuery中使用多个输入

6 个答案:

Demo