jQuery加法和减法将无法正常工作

Question

我在这里有一个小提琴：https://jsfiddle.net/0br4crLe/2/

这里的目标是使+和 - 的每个项目独立工作。

现在，当您单击1项目上的+或 - 按钮时，它将从上到下影响所有项目。见下面的截图：

必须独立工作。假设我点击了1个项目上的+按钮，它只能对该特定项目起作用而不会影响其他项目。

这是我的jQuery：

$('input[name="plus1"]').click(function(){
debugger;
var number_text = $('input[name="fname1"]').val();
if(number_text>=0){
number_text = Number(number_text);
number_text=number_text+1;
$('input[name="fname1"]').val(number_text);
}

});
$('input[name="minus1"]').click(function(){
debugger;
var number_text = $('input[name="fname1"]').val();
if(number_text>=1){
number_text = Number(number_text);
number_text=number_text-1;
$('input[name="fname1"]').val(number_text);
}

});

尝试工作，但不起作用，任何想法？你能告诉我这个小提琴的选择吗？谢谢！

Answer 1

不太干净，但您可以为每个按钮指定一个班级（minus或plus），然后使用jQuery调用这些按钮。

HTML：

      <input type="button" name="minus1" value="-" id="minus1" class="minus">
      <input type="text" name="fname1" value="2" class="value">
      <input type="button" name="plus1" value="+" id="plus1" class="plus">

然后使用.prev()或.next()来获取输入文本框元素，然后使用其值。

JS：

$('.plus').click(function() {
  var number_text = $(this).prev(); // gets the input textbox element next to the plus button
  var number_value = number_text.val(); // gets the input textbox element's current value
  if (number_value >= 0) {
    number_value = Number(number_value);
    number_value = number_value + 1;
    number_text.val(number_value);
  }

});
$('.minus').click(function() {
  var number_text = $(this).next(); // gets the input textbox element next to the minus button
  var number_value = number_text.val(); // gets the input textbox element next to the minus button
  if (number_value >= 1) {
    number_value = Number(number_value);
    number_value = number_value - 1;
    number_text.val(number_value);
  }

});

https://jsfiddle.net/0br4crLe/3/

Answer 2

问题在于，基于您的jQuery选择器，您正在影响集合中的每个元素。不使用.each()我认为这应该有效：

$('input[name="plus1"]').click(function(){
  var out = $(this).prev();
  out.val(+out.val()+1);
});
$('input[name="minus1"]').click(function(){
   var out = $(this).next();
   if(+out.val()){
     out.val(+out.val()-1);
   }
});

您的JSFiddle已更新。

Answer 3

您必须在HTML中为每个按钮指定一个不同的名称。例如，第二个按钮为“minus2”，第三个按钮为“minus3”，等等。