Question

我对jQuery还是很陌生，需要帮助来增加此代码中的3个元素。

name，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()，如文档警告所示：

使用 .clone（）具有产生带有以下内容的元素的副作用重复的id属性，应该是唯一的。 哪里可能的话，建议避免使用这种方式克隆元素属性或使用类属性作为标识符。

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

$( "#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">

jQuery克隆和增加名称为id的输入文本区域

1 个答案: