1

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

这是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 中的输入为目标。

4

6 回答 6

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

演示

于 2011-09-12T08:03:31.533 回答
3

这里有一些代码可以为你做到这一点。关键是转到被点击按钮的父级并找到该父级中的输入。这将使您获得正确的操作。我还进行了这些更改/改进：

  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/

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

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

于 2011-09-12T07:53:57.747 回答
0

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

于 2011-09-12T07:52:27.060 回答
0

采用

 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;

参考：

于 2011-09-12T07:52:30.213 回答
0

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

在行动中看到它：http: //jsfiddle.net/william/t4Np7/1/。

于 2011-09-12T07:54:11.463 回答
0

您可以使用 ：

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

进而

var newValue = parseInt(input.value) + 1;
$(input).val(newValue);
于 2011-09-12T07:58:49.940 回答