添加到現有div時動態更改輸入名稱

Question

我有一種表單，我需要根據用戶交互添加新輸入。當頁面加載時，形式如下：

<li class="basic"> 
    <h4 class="secondary-title" style="margin-top: 0px;">Specifications</h4> 
    <span style="float: right; margin-top: -40px;"><a href="#" class="add_specification_group"><i class="fa fa-plus-circle"></i> Add group</a></span> 
</li> 
<li id="specifications"> 
    <div class="specification_group" style="margin-bottom: 20px;"> 
     <div class="label"> 
      Specification group  
     </div> 
     <input name="specification_group_title1[]" type="text" class="short" placeholder="Group title" value=""> 
     <a href="#" class="add_specification_group_field"><i class="fa fa-plus-circle"></i> Add field</a><br />    
     <input name="specification_name1[]" type="text" class="short" placeholder="Name"> 
     <input name="specification_value1[]" type="text" class="short" placeholder="Value"> 
    </div> 
</li> 

我的用戶可以點擊「添加組」鏈接，以添加新組，或在「添加域」的鏈接添加字段現有的團體之一。

該組或字段的HTML取自模板。

<script type="text/template" id="specification_group_template"> 
    <div class="specification_group" style="margin-bottom: 15px;"> 
     <div class="label"> 
      Specification group  
     </div> 
     <input name="specification_group_title[]" type="text" class="short" placeholder="Group title" value=""> 
     <a href="#" class="add_specification_group_field"><i class="fa fa-plus-circle"></i> Add field</a><br />    
     <input name="specification_name[]" type="text" class="short" placeholder="Name"> 
     <input name="specification_value[]" type="text" class="short" placeholder="Value">        
    </div>       
</script> 
<script type="text/template" id="specification_group_field_template"> 
    <div class="specification_group">           
     <input name="specification_name[]" type="text" class="short" placeholder="Name"> 
     <input name="specification_value[]" type="text" class="short" placeholder="Value">        
    </div>       
</script> 
<script type="text/javascript"> 
    (function($) { 
     $(function() {                 
      var groupCount = 1; 

      $('.add_specification_group').on('click', function(e) { 
       e.preventDefault(); 
       $('#specifications').append($('#specification_group_template').html()); 
       groupCount++; 
      }); 

      $('#specifications').on('click', '.add_specification_group_field', function(e) { 
       e.preventDefault(); 
       $(this).parents('div.specification_group').append($('#specification_group_field_template').html()).find('input:last'); 
      });        
     }); 
    })(jQuery) 
</script> 

一切，現在是很好，但我想修改這個代碼，所以每當我添加一個基於groupCount變量值的新組，輸入名稱應該進行修改。

所以，如果用戶點擊「添加組」，所附的HTML應該是：

<div class="specification_group" style="margin-bottom: 20px;"> 
    <div class="label"> 
     Specification group  
    </div> 
    <input name="specification_group_title2[]" type="text" class="short" placeholder="Group title" value=""> 
    <a href="#" class="add_specification_group_field"><i class="fa fa-plus-circle"></i> Add field</a><br />    
    <input name="specification_name2[]" type="text" class="short" placeholder="Name"> 
    <input name="specification_value2[]" type="text" class="short" placeholder="Value"> 
</div> 

此外，當用戶決定新的字段添加到現有組，輸入應改名和組應該加上索引值。

$('.add_specification_group').on('click', function(e) { 
         e.preventDefault(); 
         var html = $('#specification_group_template').html(); 
         html = html.replace('specification_name[]', 'specification_name' + groupCount + '[]'); 
         html = html.replace('specification_value[]', 'specification_value' + groupCount + '[]'); 
         $('#specifications').append(html); 
         groupCount++; 
        }); 

可以保存的組號對本集團主要的div數據屬性，只需將其添加到替換：

$('.add_specification_group').on('click', function(e) { 
          e.preventDefault(); 
          var html = $('#specification_group_template').html(); 
          html = html.replace('specification_name[]', 'specification_name' + groupCount + '[]'); 
          html = html.replace('specification_value[]', 'specification_value' + groupCount + '[]'); 
          html = html.replace('div class="specification_group"', 'div data-group-no="' + groupCount + '" class="specification_group"'); 
          $('#specifications').append(html); 
          groupCount++; 
         }); 

Answer 1

添加HTML之前只需更換值然後檢索它並在添加新字段時進行替換：

$('#specifications').on('click', '.add_specification_group_field', function(e) { 
       e.preventDefault(); 
    var parent = $(this).parents('div.specification_group'); 
    var groupNo = parent.attr('data-group-no'); 
    var html = $('#specification_group_field_template').html(); 
    html = html.replace('specification_name[]', 'specification_name' + groupNo + '[]'); 
          html = html.replace('specification_value[]', 'specification_value' + groupNo + '[]'); 

parent.append(html).find('input:last'); 
      });