javascript 多个加减按钮

Multiple plus and minus buttons

提问by jldc

I am using - and + buttons to change the number of the text box, I am having troubles dealing with different text fields, here is my code:

我正在使用 - 和 + 按钮来更改文本框的编号，我在处理不同的文本字段时遇到了麻烦，这是我的代码：

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>

And here's the DEMOYou can see in the demo that the values change correctly only if you click buttons on the same field, but if you alternate between fields the values don't change properly.

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

回答by j08691

This should be all you need:

这应该就是你所需要的：

$('.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);
});

By using the unit variable you were tying both inputs together. And the plus in +$(this)is a shorthand way to take the string value from the input and convert it to a number.

通过使用单位变量，您将两个输入联系在一起。加号+$(this)是从输入中获取字符串值并将其转换为数字的一种速记方式。

jsFiddle example

jsFiddle 示例

回答by Thibault Sottiaux

You're using the same variable to hold the values of your two inputs. One simple option would be to use two variables instead of one:

您使用相同的变量来保存两个输入的值。一种简单的选择是使用两个变量而不是一个：

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 */

and unit = unitjust assigns the value of unit to itself, so that's no very useful and you can certainly leave it out.

并且unit = unit只是将 unit 的值分配给它自己，所以这不是很有用，你当然可以省略它。

回答by Joseph Marikle

An alternative approach is to use data attributes and have each element store its own value.Edit: it already stores its own value. Just access it.

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

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>