javascript - 带增量的动态表单字段创建

Question

以下是我的代码片段，我使用它通过单击“添加更多...”按钮来创建动态表单。我的问题是如何在动态生成字段上添加 +1，以便它们的名称应类似于 testimonial1、testimonial2、testimonial3 等。

Fiddle .

HTML:

<ul id="testimonial_ul" style="list-style-type: none; padding-left: 0px;">
    <li>
        <div class="field">
            <input title="Testimonial" name="testimonial" class="testimonial required" type="text" placeholder="Testimonial"/>
            <input name="testimonial_by" id="testimonial_by" class="testimonial_by required" type="text" placeholder="by..."/>
        </div>
    </li>
</ul>
<a href="#" id="more_testimonials">Add more...</a>

JS:

$("#more_testimonials").click(function() {
    $("#testimonial_ul").append('<li><div class="field"><input class="testimonial" type="text" placeholder="Testimonial"/><input class="testimonial_by" type="text" placeholder="by..."/></div><a class="removeLI">Remove</a></li> ');
});

Answer 1

试试这个:

var counter = 1;
$("#more_testimonials").click(function () {
    $("#testimonial_ul").append('<li><div class="field"><input  name="Testimonial'+counter+'" class="testimonial" type="text" placeholder="Testimonial"/><input name="Testimonial'+counter+'" class="testimonial_by" type="text" placeholder="by..."/></div><a class="removeLI">Remove</a></li> ');
    counter++;
});

工作中Fiddle.