添加到现有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'); 
      });