如何限制表单的克隆

Question

我有一个 4 表单，它下面有一个按钮说添加更多经验和添加更多教育等，当用户单击添加更多按钮时，jquery 会创建表单的克隆并附加它，我遇到的问题是我无法限制克隆的数量吗？这里是代码

$(".btn-duplicator").on("click", function(a) {
      a.preventDefault();

      var b = $(this).parent().siblings(".duplicateable-content"),
          c = $("<div>").append(b.clone()).html();
       $(c).insertBefore(b);
      var d = b.prev(".duplicateable-content");
          d.fadeIn(600).removeClass("duplicateable-content"), d.find(".btn-remove").on("click", function(a) {
          a.preventDefault();
      var b = $(this).parents(".item-block").parent("div");
          b.fadeOut(600, function() {
             b.remove()
                })
            })

        });

我尝试添加

var count = 1;
    if(count < 5) {
    count++;
    }

但似乎没有任何效果，如何将克隆限制为仅 5 种形式

体验的html结构

<div class="col-xs-12 duplicateable-content">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Name">
  </div>
  <button class="btn btn-primary btn-duplicator">Add experience</button>
</div>

教育结构及更多

<div class="col-xs-12 duplicateable-content">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="name">
  </div>
  <button class="btn btn-primary btn-duplicator">Add Education</button>
</div>

Answer 1

您的var count=1 取决于您声明它的位置。

如果您在点击处理程序中声明var count，它将始终设置为每次点击一次。如果您在单击处理程序之外声明它，它将增加。

var count = 1; // will work
$(".btn-duplicator").on("click", function(a) {
    var count = 1; // won't work - is same value every click

也可以计算元素

if( $(".duplicateable-content").length >=5 ){
   alert('Only allowed 5');
   return;// don't proceed to clone code
}

Answer 2

在后面添加以下内容：

$(".btn-duplicator").on("click", function(a) {
  var noClones = $(this).data('clones') || 0;
  $(this).data('clones', ++noClones);
  if (noClones > 5) return;
  // ...
  // ...