زيادة الكمية الديناميكية الثانية قضية تؤثر على الكمية الأولى

0

لدي قسم المنتج والحقول "Product name", "Qty" and "Add more" . يقوم المستخدم الأول بإدخال اسم المنتج ثم يقوم المستخدم بإدخال الكمية (يمكن للمستخدم إدخال الكمية مباشرة في حقل الإدخال أو يمكنه النقر فوق علامة الجمع لزيادة الكمية أو تقليل الكمية)

دعنا نتحدث عن حقل "إضافة المزيد"

إذا كان المستخدم يريد منتجات متعددة ، فيجب عليه / عليها النقر على "إضافة زر" وسيعرض الحقل نفسه "Product name", "Qty" and "Remove" .

الآن مشكلتي ، عندما يريد المستخدم منتجات متعددة فأنا أتلقى مشكلة الجودة. أقوم بزيادة كمية المنتج الثاني ولكن ذلك يزيد من كمية المنتج الأول. أعلم أن هذه المشكلة تحدث بسبب معرف المدخلات المقدمة.

هذا هو اسم المنتج الأول وكميته

Imagen 68

الآن أضفت اسم منتج واحدًا وزادت الكمية 4. لذا فإن الكمية الخاصة بي تتغير في المنتج الأول.

Imagen 69

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>

1 إجابة

1
افضل جواب

تحتاج إلى استخدام var x = 1; //initlal text box count من الكود الخاص بك لإضافة مربع إدخال جديد.

إليك الحل للنفس -

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>

:مؤلف
فوق
قائمة طعام