javascript - jQuery 克隆和递增输入、文本区域，具有名称、id 和 for

Question

我对 jQuery 还很陌生，需要帮助来了解如何在这段代码中增加 3 个元素。

名称、id 和for。

name由products[0]category组成，id由checkbox[0]组成，for 由 checkbox[0] 组成，用于 id 使用的复选框上的标签。

我尝试寻找示例。但不幸的是，他们都没有找到任何可以让我学习的好结果。因此，在下面的代码中，它们不会增加增量，因为我完全不知道我还能做什么来增加增量编号。

$(document).ready(function() {

  let $append = $('#append');

  // append location's data listing
  $append.on('change', '.location', function(){
    var value = $(this).val();
    $('.location_id').val($('#locations [value="'+value+'"]').data('locationid'));
    $('.loc_desc').val($('#locations [value="'+value+'"]').data('locdesc'));
  });

  // enable checkbox for serialnumbers
  $append.on('change','.enable-serial', function(){
    let $item = $(this).closest('.product-item');
    let $checkbox = $item.find('.enable');
    $checkbox.prop('disabled', !this.checked);
  });
  // ctrl for key in checkbox
  $append.on('click', '.keyin-ctrl', function() {
    let $container = $(this).closest('.product-item');
    let $serial = $container.find('.serial');
    $container.find('.display').val(function(i, v) {
      return v + $serial.val() + ';\n';
    });
    $serial.val('').focus();
  });
  // ctrl for del textarea
  $append.on('click', '.undo-ctrl', function() {
    let $container = $(this).closest('.product-item');
    $container.find('.display').val('');
  });
  // clone product, increment products[x]var
  $('#add_product').on('click', function() {
    var itemNo = $('.product-item').length + 1;
    var index = $('.product-item').length;
    var regex = /^(.+?)(\d+)$/i;
    let $product = $append.find('.product-item.template')
      .clone()
      .show()
      .removeClass('template')
      .insertAfter('.product-item:last');;
    $product.find('span').text('#' + itemNo);
    $product.find(':checkbox').prop('checked', false);
    $product.find('.enable').prop('disabled', true);
    $product.find('input, textarea').val('');
    $('#append').append($product);
  });
  // delete product, but remain original template intact
  $('#delete_product').on('click', function(){
    var itemNo = $('.product-item').length + 1;
    let $product = $append.find('.product-item:last:not(".template")');
    $product.remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="shadow border">
    <h4>{{ __('Product Details') }}</h4>
    <hr>
    <form method="post" action="">
      <!-- Multiple Product addition -->
      <div class="form-group row">
        <label class="col-sm-2 col-form-label font-weight-bold">{{ __('Product Setting') }}</label><br/>
        <div class="col-sm-5">
          <button type="button" id="add_product" class="btn btn-dark">{{ __('Add Product') }}&nbsp;<i class="fas fa-plus-square"></i></button>
          <button type="button" id="delete_product" class="btn btn-dark ml-3">{{ __('Delete Last Product') }}&nbsp;<i class="fas fa-minus-square"></i></button>
        </div>
      </div>
      <hr>
      <!-- Frist Group -->
      <div class="product" id="append">
        <!-- Product Details -->
        <div class="product-item template">
          <span>#1</span>
          <div class="form-group row">
           <label class="col-sm-2 col-form-label font-weight-bold">{{ __('Category') }}</label>
           <div class="col-sm-2">
             <input class="form-control" name="products[0]category" type="text" placeholder="eg. 333" maxlength="3"required>
           </div>
           <label class="col-sm-1 col-form-label font-weight-bold">{{ __('Code') }}</label>
           <div class="col-sm-2">
             <input class="form-control" name="products[0]code" type="text" placeholder="eg. 22" maxlength="2" required>
           </div>
           <label class="col-sm-1 col-form-label font-weight-bold">{{ __('Partnumber') }}</label>
           <div class="col-sm-2">
            <input class="form-control" name="products[0]partnumber" type="text" placeholder="eg. NGH92838" required>
           </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label font-weight-bold">{{ __('Brand') }}</label>
            <div class="col-sm-2">
              <input class="form-control" name="products[0]brand" type="text" placeholder="eg. Rototype" required>
            </div>
            <label class="col-sm-1 col-form-label font-weight-bold">{{ __('Quantities') }}</label>
            <div class="col-sm-2">
              <input class="form-control" name="products[0]qty" type="number" placeholder="eg. 1" required>
            </div>
            <label class="col-sm-1 col-form-label font-weight-bold">{{ __("Location") }}</label>
            <div class="col-sm-2">
              <input class="form-control location" type="text" name="products[0]loc_name" list="locations" value="">
              <input type="hidden" class="location_id" name="products[0]location_id" value="">
              <input type="hidden" class="loc_desc" name="products[0]loc_desc" value="">
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label font-weight-bold">{{ __("Description") }}</label>
            <div class="col-sm-8">
              <input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label font-weight-bold">{{ __('Seial Number(s)') }}</label>
            <div class="col-sm-5">
              <input class="form-control enable serial" maxlength="25" placeholder="Key in Serial Number and hit button 'Key In'" disabled>
            </div>
            <div class="col-sm-5">
              <button class="btn btn-dark enable keyin-ctrl" type="button" disabled>{{ __('Key In') }}</button>
              <button class="btn btn-dark enable undo-ctrl" type="button" disabled>{{ __('Del') }}</button>
              <input class="form-check-input ml-4 mt-2 pointer enable-serial" id="checkbox[0]" type="checkbox">
              <label class="form-check-label ml-5 pointer" for="checkbox[0]">{{ __('tick to enable serialnumber')}}</label>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label"></label>
            <div class="col-sm-5">
              <textarea class="form-control display" name="products[0]serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>
            </div>
          </div>
          <hr>
        </div>
      <!-- append start -->
      </div>
      <div class="form-group row">
        <div class="col-sm-12 ">
          @csrf
          <button type="submit" class="btn btn-dark float-right ml-4">Next&nbsp;<i class="fas fa-caret-right"></i></button>
          <!--<button type="button" class="btn btn-secondary float-right" onclick="history.back()">Previous</button>-->
        </div>
      </div>
      <datalist id="locations">
        @foreach($locations as $location)
          <option value="{{ $location->loc_name}}" data-locationid="{{ $location->location_id }}" data-locdesc="{{ $location->loc_desc }}"></option>
        @endforeach
      </datalist>
    </form>
  </div>
</main>

那么，我实际上如何实现这一目标，以向我的克隆的 NAME、ID 和 FOR 添加增量？

从原来的products[0]variable模板到products[1]variable，checkbox[0]到checkbox [1]

Answer 1

如果你想增加 ID、类等，你不能使用 .clone()，就像文档警告的那样:

Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

您必须按照下面一个非常简单的示例“手动”执行此操作:

$( "#addrow" ).click(function() {
  var count = $("#product").children().length;
  $("#product").append("<input id='field[" + count + "]' type='text'>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product">

</div>
<input id="addrow" type="button" value="Add field">