javascript - 如何在输入框中显示数量总数

Question

我有一个数量字段。用户可以在单击“添加”按钮时添加多个数量字段。

我的问题是，我必须在输入框中显示数量总数。例如，我在数量框中添加了 10 个数量，总计框中的总数为 10。

用户可以通过点击加号和减号按钮来增加和减少数量，也可以直接在数量框中输入数量，总计将显示在总计框中。

用户可以添加多个与删除相同的数量字段。我点击删除数量应该从总数量字段中删除。

你也可以在这里查看我的代码https://jsfiddle.net/pu6qy4zr/70/

function increaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number' + n).value = value;

}

function decreaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number' + n).value = value;
}

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".add_row"); //Fields wrapper
  var add_button = $(".add_row_click"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $("input[id^=medication_name]").focus();
      $(wrapper).append('<div class="custom_fields"><div class="col-md-6"><div class="row"><div class="col-md-6"><div class="form_group"><div class="plus_minus"><span class="value_button decrease" onclick="decreaseValue(' + x + ')" value="Decrease Value"> - </span><input type="number" id="number' + x + '" class="qty_number form_control" name="qty_number[]" class="form_control" value="0" /><span class="value_button increase" onclick="increaseValue(' + x + ')" value="Increase Value"> + </span></div></div></div><div class="col-md-6"><div class="form_group"> <div class="btn_row remove_field"> <span> - </span> Remove  </div></div></div></div></div></div></div>');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('.custom_fields').remove();
    x--;
  })


});

<div class="add_row">
  <div class="plus_minus">
    <span class="value_button decrease" onclick="decreaseValue(1)" value="Decrease Value">-</span>
    <input type="number" id="number1" class="qty_number form_control" name="qty_number[]" value="0" class="form_control" />
    <span class="value_button increase" onclick="increaseValue(1)" value="Increase Value">+</span>

  </div>
  <div class="btn_row add_row_click"> <span> +  </span> Add </div>
</div>
<input type="text" class="form_control" name="total_qty" id="total_qty" value="" placeholder="Total number of quantity" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

你可以简化这一切。

• 运行sum()每次更改，包括删除和直接输入/粘贴。
• 只有一个加号/减号事件处理程序
• 删除内联处理程序

PS:我发现了一个错误:value < 1 ? value = 1 : '';将强制值为 1
PPS:我建议您对 div 使用 .clone 而不是插入它。使更新 HTML 变得更加容易。由于我委托(delegate)并使用相对寻址，因此您无需更改字段的ID

function sum() {
  var total = 0;
  $(".qty_number").each(function() { // or use .map.get()
    total += this.value?parseInt(this.value):0;
  })
  $("#total_qty").val(total);
}


$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var $wrapper = $(".add_row"); //Fields wrapper
  var add_button = $(".add_row_click"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).on("click",function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $("input[id^=medication_name]").focus();
      $wrapper.append('<div class="custom_fields"><div class="col-md-6"><div class="row"><div class="col-md-6"><div class="form_group"><div class="plus_minus"><span class="value_button decrease" value="Decrease Value"> - </span><input type="number" id="number' + x + '" class="qty_number form_control" name="qty_number[]" class="form_control" value="0" /><span class="value_button increase" value="Increase Value"> + </span></div></div></div><div class="col-md-6"><div class="form_group"> <div class="btn_row remove_field"> <span> - </span> Remove  </div></div></div></div></div></div></div>');
    }
  });

  $wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('.custom_fields').remove();
    x--;
    sum(); // remove also updates the total
  })
  $wrapper.on("click",".value_button",function() {
    var $input = $(this).closest(".plus_minus").find(".qty_number");
    var value = parseInt($input.val(), 10);
    value = isNaN(value) ? 0 : value;
    value+=$(this).is(".decrease")?-1:1; // decrease on increase dependent on class
    if (value < 0) value=0;
    $input.val(value);
    sum(); // sum each time
  });
  $wrapper.on("input",".qty_number",sum); // any input or paste
});

<div class="add_row">
  <div class="plus_minus">
    <span class="value_button decrease" value="Decrease Value">-</span>
    <input type="number" id="number1" class="qty_number form_control" name="qty_number[]" value="0" class="form_control" />
    <span class="value_button increase" value="Increase Value">+</span>

  </div>
  <div class="btn_row add_row_click"> <span> +  </span> Add </div>
</div>
<input type="text" class="form_control" name="total_qty" id="total_qty" value="" placeholder="Total number of quantity" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>