javascript - 克隆表单元素并增加名称标签

Question

使用下面的 html 和 fork 的 js 我几乎已经完成了这个工作但是，我需要将标签引用更改为 category1 并且它的内部 html 以随着 id 等递增

有什么想法吗？

问候皮特

<div class="category" id="category1"> 
        <div class="row">
            <!-- Till Category -->
            <div class="col col-lg-8">
                <div class="form-group">
                    <label class="control-label" for="Category1">Category1</label>
                    <select id="Category1" name="Category1" class="form-control">
                        <option>Option one</option>
                        <option>Option two</option>
                    </select>
                </div>
            </div>

            <!-- helpful addition-->
            <div class="col col-lg-1">
                <div class="form-group">
                    <label class="control-label" for="Qty1">qty1</label>
                    <input id="Qty1" name="Qty1" type="text" placeholder="Quantity" class="form-control">
                </div>
            </div>
            <div class="col col-lg-1"> 
                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label" for="Cost1">Cost1</label>
                    <input id="Cost1" name="Cost1" type="text" placeholder="Cost" class="form-control">
                </div>
            </div>
            <div class="col col-lg-1"> 
                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label" for="Total1">Total1</label>
                    <input id="Total1" name="Total1" type="text" placeholder="" class="form-control">
                </div>
            </div>
            <div class="col col-lg-1"> 
                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label" for="another">New</label>
                    <button type="button" name="another" class="btn btn-info btn-sm form-control clone">+</button>
                </div>
            </div>
        </div>
    </div>

还有我的 JS 代码:

var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".category").length + 1;

$(document).on("click", 'button.clone', function(){
  $(this).closest(".category").clone().insertBefore(".before")
  .attr("id", "category" +  cloneIndex).find("[id], [name]").each(function() {
      this.id = this.id.replace(/\d+$/, cloneIndex );
      this.name = this.name.replace(/\d+$/, cloneIndex );
  });
  cloneIndex++;
});

Answer 1

为此，我将采用完全不同的方法并使用 HTML 模板。

虽然有很多模板库可供您使用(Handlebars、Mustache、jQuery plugin 等)，但一个简单的字符串替换就可以很好地用于此示例。

Live Demo

JS

var clone = (function(){

    var cloneIndex = 0; 
    var template = $('#categoryTemplate').text(); 

    return function(){
        //Replace all instances of {{ID}} in our template with the cloneIndex.
        return template.replace(/{{ID}}/g, ++cloneIndex);  
    } 

})();//self executing function.

var categories = $('#categories')

$(document).on("click", 'button.clone', function(){
  categories.append(clone()); 
});

//Start us off with 1 category.
categories.append(clone());

HTML - 注意 HTML 位于 text/template script 标签内。

<script type="text/template" id="categoryTemplate">
    <div class="category" id="category{{ID}}"> 
        <div class="row">
            <!-- Till Category -->
            <div class="col col-lg-8">
                <div class="form-group">
                    <label class="control-label" for="Category{{ID}}">Category{{ID}}</label>
                    <select id="Category{{ID}}" name="Category{{ID}}" class="form-control">
                        <option>Option one</option>
                        <option>Option two</option>
                    </select>
                </div>
            </div>

            <!-- helpful addition-->
            <div class="col col-lg-1">
                <div class="form-group">
                    <label class="control-label" for="Qty{{ID}}">qty{{ID}}</label>
                    <input id="Qty{{ID}}" name="Qty{{ID}}" type="text" placeholder="Quantity" class="form-control">
                </div>
            </div>
            <div class="col col-lg-1"> 
                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label" for="Cost{{ID}}">Cost{{ID}}</label>
                    <input id="Cost{{ID}}" name="Cost{{ID}}" type="text" placeholder="Cost" class="form-control">
                </div>
            </div>
            <div class="col col-lg-1"> 
                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label" for="Total{{ID}}">Total{{ID}}</label>
                    <input id="Total{{ID}}" name="Total{{ID}}" type="text" placeholder="" class="form-control">
                </div>
            </div>

        </div>
    </div>
</script>
<div id='categories'></div>
<div class="col col-lg-1"> 
    <!-- Text input-->
    <div class="form-group">
        <label class="control-label" for="another">New</label>
        <button type="button" name="another" class="btn btn-info btn-sm form-control clone">+</button>
    </div>
</div>