多个加减按钮

Question

我正在使用“+”和“-”按钮来更改文本框中的数字，但是在处理不同的文本字段时遇到了麻烦，下面是我的代码:

var unit = 0;
var total;
// if user changes value in field
$('.field').change(function() {
  unit = this.value;
});
$('.add').click(function() {
  unit++;
  var $input = $(this).prevUntil('.sub');
  $input.val(unit);
  unit = unit;
});
$('.sub').click(function() {
  if (unit > 0) {
    unit--;
    var $input = $(this).nextUntil('.add');
    $input.val(unit);
  }
});

button {
  margin: 4px;
  cursor: pointer;
}
input {
  text-align: center;
  width: 40px;
  margin: 4px;
  color: salmon;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=field1>
  field 1
  <button type="button" id="sub" class=sub>-</button>
  <input type="text" id="1" value=0 class=field>
  <button type="button" id="add" class=add>+</button>
</div>
<div id=field2>
  field 2
  <button type="button" id="sub2" class=sub>-</button>
  <input type="text" id="2" value=0 class=field>
  <button type="button" id="add2" class=add>+</button>
</div>

这是演示。 在演示中，您可以看到只有在同一字段上单击按钮时，值才会正确更改，但如果在字段之间交替点击，则值不会正确更改。

- jldc

---

var id = $(this).attr('id'); 中的 this 指的是什么？id 在哪里被使用了？ - j08691

哦，我没有使用它，而且我忘记把它删除了，谢谢。 - jldc

Answer 1

这应该是你所需要的全部：

$('.add').click(function () {
    $(this).prev().val(+$(this).prev().val() + 1);
});
$('.sub').click(function () {
    if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
});

通过使用单位变量，您将两个输入绑定在一起。而+$(this)中的加号是一种简写方式，可以将输入框中的字符串值转换为数字。 jsFiddle示例

- j08691

---

我尝试了您的方法来进行加减0.1的操作，但是在一些运算后，我发现数值的小数位变成了1.000000000001等。我该怎么办？ - Daniele

@Daniele 发布一个新问题，包括您的详细信息和 [mcve]。 - j08691

Answer 2

您正在使用相同的变量来保存两个输入的值。一个简单的解决方案是使用两个变量而不是一个：

var unit_1 = 0;
$('#add1').click(function() {
   unit_1++;
   var $input = $(this).prev();
   $input.val(unit_1);
});
/* Same idea for sub1 */

var unit_2 = 0;
$('#add2').click(function() {
   unit_2++;
   var $input = $(this).prev();
   $input.val(unit_2);
});
/* Same idea for sub2 */

unit = unit只是将unit的值赋给自身，因此它并没有什么用处，您可以将其省略。

- Thibault Sottiaux

Answer 3

另一种方法是使用数据属性，让每个元素存储自己的值。编辑：它已经存储了自己的值。只需访问它即可。

var total;
// if user changes value in field
$('.field').change(function() {
  // maybe update the total here?
}).trigger('change');

$('.add').click(function() {
  var target = $('.field', this.parentNode)[0];
  target.value = +target.value + 1;
});

$('.sub').click(function() {
  var target = $('.field', this.parentNode)[0];
  if (target.value > 0) {
    target.value = +target.value - 1;
  }
});

button {
  margin: 4px;
  cursor: pointer;
}
input {
  text-align: center;
  width: 40px;
  margin: 4px;
  color: salmon;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=field1>
  field 1
  <button type="button" id="sub" class=sub>-</button>
  <input type="text" id="1" value=0 class=field>
  <button type="button" id="add" class=add>+</button>
</div>
<div id=field2>
  field 2
  <button type="button" id="sub2" class=sub>-</button>
  <input type="text" id="2" value=0 class=field>
  <button type="button" id="add2" class=add>+</button>
</div>

- Joseph Marikle