javascript - jQuery 加法和减法无法正常工作

Question

我这里有一个 fiddle :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);
}

});

尝试了一些事情，但没有奏效，知道吗？你能告诉我 fiddle 选项吗？谢谢!

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/