Question

所以当我更改选择时它应该附加到long，并且不能超过longDuration 但是当我再次选择时，它添加了更多的追加所以我每次更改附录时必须小于longDuration吗？并且必须删除旧的附件...

 $('.long-duration').change(function(){
    var longDuration = ($(this).val()) -1
    for(var i =0; i < longDuration; i++){
      $('.display').append('<div class="col-12 col-sm-3"></div><div class="col-12 col-sm-3"><div class="form-group"><label>Number Money</label><input class="form-control" type="number" placeholder=""></div></div><div class="col-12 col-sm-3"><div class="form-group"><label>Date</label><input class="form-control" type="number" placeholder=""></div></div><div class="col-12 col-sm-3"><div class="form-group"><label>Payment</label><input class="form-control" placeholder="Money Section" disabled></div></div>')
    }
  })

Answer 1

每次输入更改时都将添加，而不会清除最后一次更改后附加的项目（如果这样的话）。尝试在添加前清空父节点。例如：

$('.long-duration').change(function() {
  var longDuration = ($(this).val()) - 1;
  $('.display').empty(); // Remove the previously appended items
  for (var i = 0; i < longDuration; i++) {
    $('.display').append('<div class="col-12 col-sm-3"></div><div class="col-12 col-sm-3"><div class="form-group"><label>Number Money</label><input class="form-control" type="number" placeholder=""></div></div><div class="col-12 col-sm-3"><div class="form-group"><label>Date</label><input class="form-control" type="number" placeholder=""></div></div><div class="col-12 col-sm-3"><div class="form-group"><label>Payment</label><input class="form-control" placeholder="Money Section" disabled></div></div>')
  }
});

希望这会有所帮助。

编辑...

尽管这也会清除附加字段中的所有输入数据。

为避免这种情况，您可以尝试以下操作。

$('.long-duration').on('change input keyup cut paste', function() {
  var longDuration = parseInt($(this).val());

  var $currentFields = $('.display').find('.appended-field');
  var totalFields = $currentFields.length;

  if (totalFields > longDuration) {
    $currentFields.filter(':eq(' + longDuration + '), :gt(' + (longDuration - 1) + ')').remove();
  } else {
    for (var i = 0; i < (longDuration - totalFields); i++) {
      $('.display').append($('#long-duration-template').html());
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="form-group">
    <label>Long duration</label>
    <input type="number" class="long-duration form-control">
  </div>
  <div class="display"></div>
</div>


<script type="text/template" id="long-duration-template">
  <div class="appended-field row">
    <div class="col-12 col-sm-3"></div>
    <div class="col-12 col-sm-3">
      <div class="form-group">
        <label>Number Money</label>
        <input class="form-control" type="number" placeholder="">
      </div>
    </div>
    <div class="col-12 col-sm-3">
      <div class="form-group">
        <label>Date</label>
        <input class="form-control" type="number" placeholder="">
      </div>
    </div>
    <div class="col-12 col-sm-3">
      <div class="form-group">
        <label>Payment</label>
        <input class="form-control" placeholder="Money Section" disabled>
      </div>
    </div>
  </div>
</script>

如何删除附加的每个更改？

1 个答案: