jQuery克隆和增加名稱為id的輸入文本區域

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屬性的元素的副作用，這些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">