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>

我可以点击＆＃34;添加组＆＃34;链接以添加新组，或在＆＃34;添加字段＆＃34;链接以将字段添加到其中一个现有组。

组或字段的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变量值修改输入名称。

因此，如果用户点击＆＃34;添加组＆＃34;，则附加的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>

此外，当用户决定将新字段添加到现有组时，应重命名输入并添加组索引值。

Answer 1

在添加html之前只需替换值：

$('.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++;
                        });

然后在添加新字段时检索并替换：

$('#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');
            });

附加到现有div

1 个答案: