javascript - 影响第一个数量的动态第二个数量增加问题

Question

我有一个产品部分，字段是"Product name", "Qty" and "Add more". 第一个用户输入产品名称，然后用户输入数量（用户可以在输入字段中直接输入数量，也可以点击加号增加数量或减少数量）

让我们谈谈“添加更多”字段

如果用户想要多个产品，那么他/她应该点击“添加更多按钮”，它将显示相同的字段，即"Product name", "Qty" and "Remove"。

现在我的问题是，当用户想要多种产品时，我就会遇到质量问题。我正在增加第二个产品的数量，但这会增加第一个产品的数量。我知道，这个问题是由于输入字段的 id 而发生的。

这是我的第一个产品名称和数量

现在我又添加了一个产品名称并增加了数量 4。所以我的数量在第一个产品上发生了变化。

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

function decreaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number').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");

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    //alert("hellow");
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      var id_counter = 1;
      $(wrapper).append('<div class="custom_fields"><input type="text" name="product" placeholder="Enter product name"><div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div><input type="number" id="number" value="0" /><div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div> <div class="btn_row remove_field"> <span> - </span> Remove  </div></div>');
    }
  });

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

    x--;
  })
});

form {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
}

.value-button {
  display: inline-block;
  border: 1px solid #ddd;
  margin: 0px;
  width: 40px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  padding: 11px 0;
  background: #eee;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.value-button:hover {
  cursor: pointer;
}

form #decrease {
  margin-right: -4px;
  border-radius: 8px 0 0 8px;
}

form #increase {
  margin-left: -4px;
  border-radius: 0 8px 8px 0;
}

form #input-wrap {
  margin: 0px;
  padding: 0px;
}

input#number {
  text-align: center;
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin: 0px;
  width: 40px;
  height: 40px;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn_row {
  transition: .2s;
  width: 100%;
  font-weight: normal;
  font-size: 14px;
  font-family: Muli;
  outline: none;
  border: none;
  padding: 7px;
  background: #f4f2f3;
  color: #999;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  color: #000;
  font-weight: bold;
}

.btn_row span {
  font-size: 18px;
}

.add_row_click {
  background: #a8dabf;
}

<form>
  <div class="add_row">
    <input type="text" name="product" placeholder="Enter product name">
    <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
    <input type="number" id="number" value="0" />
    <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
    <div class="btn_row add_row_click"> <span> +  </span> Add </div>

  </div>
</form>

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

标签： javascriptjqueryhtml

Answer 1

您需要使用var x = 1; //initlal text box countfrom 您的代码来添加新的输入框。

这是相同的解决方案 -

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");

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    //alert("hellow");
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      var id_counter = 1;
      $(wrapper).append('<div class="custom_fields"><input type="text" name="product" placeholder="Enter product name"><div class="value-button" id="decrease" onclick="decreaseValue(' + x + ')" value="Decrease Value">-</div><input type="number" id="number' + x + '" value="0" /><div class="value-button" id="increase" onclick="increaseValue(' + x + ')" value="Increase Value">+</div> <div class="btn_row remove_field"> <span> - </span> Remove  </div></div>');
    }
  });

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

    x--;
  })
});

form {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
}

.value-button {
  display: inline-block;
  border: 1px solid #ddd;
  margin: 0px;
  width: 40px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  padding: 11px 0;
  background: #eee;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.value-button:hover {
  cursor: pointer;
}

form #decrease {
  margin-right: -4px;
  border-radius: 8px 0 0 8px;
}

form #increase {
  margin-left: -4px;
  border-radius: 0 8px 8px 0;
}

form #input-wrap {
  margin: 0px;
  padding: 0px;
}

input#number {
  text-align: center;
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin: 0px;
  width: 40px;
  height: 40px;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn_row {
  transition: .2s;
  width: 100%;
  font-weight: normal;
  font-size: 14px;
  font-family: Muli;
  outline: none;
  border: none;
  padding: 7px;
  background: #f4f2f3;
  color: #999;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  color: #000;
  font-weight: bold;
}

.btn_row span {
  font-size: 18px;
}

.add_row_click {
  background: #a8dabf;
}

<form>
  <div class="add_row">
    <input type="text" name="product" placeholder="Enter product name">
    <div class="value-button" id="decrease" onclick="decreaseValue(1)" value="Decrease Value">-</div>
    <input type="number" id="number1" value="0" />
    <div class="value-button" id="increase" onclick="increaseValue(1)" value="Increase Value">+</div>
    <div class="btn_row add_row_click"> <span> +  </span> Add </div>

  </div>
</form>

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