Question

我创建了一个表来添加新行，其中每行都有输入数量但效果不佳。

当我添加多行时，第一个输入的量值增加不止一次。

我希望每次点击每次输入增加1次。

我的HTML - 玉：

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

我的观点:(当我读条形码时，我添加一个新的tr）

tr(class="item-article", id="#{data.ref}", data-codigo="#{data.codigo}")
      td(class="td-ref")
        span #{data.ref}
      td(class="td-design")
        span #{data.design}
      td(class="td-qtt")
        <input type='button' value='-' class='minus' />
        <input type='text' size='10' class='value' value='0' />
        <input type='button' value='+' class='plus' />

我的jquery：

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

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.等...

谢谢

Answer 1

问题是每次添加一行时都要调用btnPlusMinusInit() - 每次调用都会绑定一个额外的事件。因此，在添加3行后，第一行中按钮的事件将被调用3次。

将jQuery's on event handler与选择器结合使用会更好。通过使用选择器（在您的情况下为'.minus, .plus'），事件被委派并影响添加到DOM的新元素。

所以试试这个：

＆＃13;

$('#add-row').click(function() {
  var row = '<tr><td>'+
    '<input type="button" value="-" class="minus" />'+
    '<input type="text" size="10" class="value" value="0" />'+
    '<input type="button" value="+" class="plus" />'+
    '</td></tr>';
    $(".table-reception tbody").append(row);    
});
$(document).on('click', '.minus, .plus', 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();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-reception">
<tbody></tbody>
</table>

<button id="add-row">Add row</button>

＆＃13;

Answer 2

首先，它不是处理类的函数的好方法。

function btnPlusMinusInit()
{
  $('#plusBtn').click(btnPlus); //use id selector, for unique elements 
  $('#minusBtn').click(btnMinus); //use id selector, for unique elements
};
btnPlusMinusInit();
function btnPlus(e){
    var $input = $(this).siblings('#value'); //use id selector, for unique elements
    var inputValue = $input.val();
    inputValue = inputValue.trim() != "" ? inputValue : 0; //check for empty input or add readonly
    var val = parseInt(inputValue);
    $input.val(val + 1);
    $( "#barCode" ).val(''); //use id selector, for unique elements
    $( "#barCode" ).focus(); //use id selector, for unique elements
}

function btnMinus(e){
    var $input = $(this).siblings('#value'); //use id selector, for unique elements
    // var $input = $('#value');  would be the same for a unique value element.
    var inputValue = $input.val();
    inputValue = inputValue.trim() != "" ? inputValue : 0;  //check for empty input or add readonly
    var val = parseInt(inputValue);
    $input.val(val - 1);
    $( "#barCode" ).val(''); //use id selector, for unique elements
    $( "#barCode" ).focus(); //use id selector, for unique elements
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="minusBtn" type='button' value='-' class='minus' />
<input id="value" type='text' size='10' class='value' value='0' />
<input id="plusBtn" type='button' value='+' class='plus' />
<div id="barCode">HERE IS A BARCODE</div>

如何使用多个输入数字？

2 个答案: