Javascript 如何使用多个输入号码？

我正在创建一个表来添加新行，其中每行都有一个输入量，但效果不好

当我添加多行时，第一个输入的数量会多次递增

我希望每个输入每次单击增加1次

我的html-jade：

table(class=["table","table-hover", 'table-reception'])
                thead
                  tr
                    th Referência
                    th Designação
                    th Quantidade
                tbody

我的观点：（当我读条形码时，我添加了一个新的tr）

Jquery-加载条形码：

function receptionArticle()
    {
      $('.barCode').change(function ()
      {
        barCode = $(this).val();
        //alert($(this).val());
        document.getElementById('scrollToReception').scrollIntoView();

        $.get("/warehouse-reception-getArticle/"+encodeURIComponent(barCode), function(data)
        {
          if(data == 'false')
          {
            $.get("/warehouse-reception-popup/", function(data)
            {
              $(".popup").html('');
              $(".popup").append(data);
              $('.opacity').show();
              $('.popup').show();
              closeWarehousePopup();
            });
          }
          else
          {
            $(".table-reception tbody").append(data);
            $(".table-reception tbody tr:last").hide();
            $('.table-reception tbody tr:last').css( "background-color", "#2ecc71" ).fadeIn(1000);
            $( ".table-reception tbody tr:last" ).animate({
              'background-color': "initial"
            }, 5000);
            $("#reception-message").hide();
            $( ".barCode" ).val('');
            $( ".barCode" ).focus();
            btnPlusMinus();
          }

        });

      });
    }

Html: 如果我添加五行并增加第一个输入，结果是5而不是1。如果我在第二行递增，结果是4加1。等等

---

谢谢

首先，用类处理函数不是一个好的解决方案

函数btnPlusMinusInit（）
{
$（'#plusBtn'）。单击（btnPlus）；//对于唯一元素，使用id选择器
$（'#minusBtn'）。单击（btnMinus）；//对于唯一元素，使用id选择器
};
btnPlusMinusInit（）；
功能btnPlus（e）{
var$input=$（this）.同级（'#value'）；//对于唯一的元素，使用id选择器
var inputValue=$input.val（）；
inputValue=inputValue.trim（）！=“”？inputValue:0；//检查空输入或添加只读
var val=parseInt（inputValue）；
$input.val（val+1）；
$（“#条形码”）.val（“”）；//对于唯一元素，请使用id选择器
$（“#条形码”）.focus（）；//对于唯一元素，请使用id选择器
}
函数btnMinus（e）{
var$input=$（this）.同级（'#value'）；//对于唯一的元素，使用id选择器
//var$input=$（“#value”）；对于唯一的value元素来说是相同的。
var inputValue=$input.val（）；
inputValue=inputValue.trim（）！=“”？inputValue:0；//检查空输入或添加只读
var val=parseInt（inputValue）；
$input.val（val-1）；
$（“#条形码”）.val（“”）；//对于唯一元素，请使用id选择器
$（“#条形码”）.focus（）；//对于唯一元素，请使用id选择器
}

这是一个条形码

问题在于，每次添加行时，您都在调用

btnPlusMinusInit（）

，每次调用都会绑定一个额外的事件。因此，在添加3行之后，第一行中按钮的事件被调用3次

最好使用选择器。通过使用选择器（在您的例子中是

”.减号、.plus“

），事件被委派，并影响添加到DOM中的新元素

因此，请尝试以下方法：

$（'#添加行'）。单击（函数（）{
变量行=“”+
''+
''+
''+
'';
$（“.table receivement tbody”）.append（行）；
});
$（文档）.on（'click'，'）。减、.plus'，函数（e）{
e、 预防默认值（）；
var$input=$（this.sibbines（'.value'）；
var val=parseInt（$input.val（），10）；
$input.val（val+（$（this.hasClass（'减号'）？-1:1））；
$（“.barCode”）.val（“”）；
$（“.barCode”）.focus（）；
});

添加行
是否有多个
，其中每个都包含三个
元素？你能发布生成的html吗？我为你的问题创建了一个新的html代码猜测。这把小提琴拉得很好。您的代码与小提琴中的代码有何不同？我更新了这个问题。谢谢@gus27您能发布生成的html代码吗：将被交付到浏览器的html代码？请显示动态添加行的代码。但是如果我使用ID，我会遇到多个输入的问题。这些行将被动态添加到表中。如何仅对输入中的正数进行添加？多谢各位@gus27@user3242861在
var val=parseInt（$input.val（），10）之后执行一个
if（如果）值，但在到达0后，我不能再次递增@gus27@user3242861当然，只有当
valDone！谢谢@gus27时，您才应该
返回

function btnPlusMinus()
{
  $('.minus, .plus').click(function (e) {
    e.preventDefault();
    var $input = $(this).siblings('.value');
    var val = parseInt($input.val(), 10);
    $input.val(val + ($(this).hasClass('minus') ? -1 : 1));
    $( ".barCode" ).val('');
    $( ".barCode" ).focus();
  });
}

function receptionArticle()
    {
      $('.barCode').change(function ()
      {
        barCode = $(this).val();
        //alert($(this).val());
        document.getElementById('scrollToReception').scrollIntoView();

        $.get("/warehouse-reception-getArticle/"+encodeURIComponent(barCode), function(data)
        {
          if(data == 'false')
          {
            $.get("/warehouse-reception-popup/", function(data)
            {
              $(".popup").html('');
              $(".popup").append(data);
              $('.opacity').show();
              $('.popup').show();
              closeWarehousePopup();
            });
          }
          else
          {
            $(".table-reception tbody").append(data);
            $(".table-reception tbody tr:last").hide();
            $('.table-reception tbody tr:last').css( "background-color", "#2ecc71" ).fadeIn(1000);
            $( ".table-reception tbody tr:last" ).animate({
              'background-color': "initial"
            }, 5000);
            $("#reception-message").hide();
            $( ".barCode" ).val('');
            $( ".barCode" ).focus();
            btnPlusMinus();
          }

        });

      });
    }