Javascript 追加限制仅为jquery.Append的5倍

我在这里看到过类似的问题和答案，但没有什么能解决我的问题。所以我在这里又问了一遍

对于jquery，我希望用户只添加五次输入字段，我使用了.append，它工作正常，但添加次数不限

$("#add-cert").click(function(){
        var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");

        $("i").append($addinput);

        });

$（“#添加证书”）。单击（函数（）{
var$addinput=$（“输入您的证书”）；
$（“i”）。追加（$addinput）；
});

请提供修复，我是jquery新手。我也尝试过以下代码，但使用此代码。append停止工作：

$("#add-cert").click(function(){
        var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text' name='manual-cert'></div></div>");

        var num = $("input[name='manual-cert']").length;

        if(num > 5){
        $("i").append($addinput);
        }
        });

$（“#添加证书”）。单击（函数（）{
var$addinput=$（“输入您的证书”）；
var num=$（“输入[name='manual-cert']”）长度；
如果（数值>5）{
$（“i”）。追加（$addinput）；
}
});

像这样的东西

var maxAppend = 0;
$("#add-cert").click(function(){
    if (maxAppend >= 5) return;

    var addinput = $(
        "<div class='row'><div class='small-6 columns'>"+
        "<label class='right inline'>Enter Your Certificate</label></div>"+
        "<div class='small-6 columns'><input type='text'></div></div>");
    maxAppend++;

    $("i").append(addinput);
});

var maxAppend=0；
$（“#添加证书”）。单击（函数（）{
如果（maxAppend>=5）返回；
var addinput=$(
""+
“输入您的证书”+
"");
maxAppend++；
$（“i”）。追加（额外输入）；
});

像这样的东西

var maxAppend = 0;
$("#add-cert").click(function(){
    if (maxAppend >= 5) return;

    var addinput = $(
        "<div class='row'><div class='small-6 columns'>"+
        "<label class='right inline'>Enter Your Certificate</label></div>"+
        "<div class='small-6 columns'><input type='text'></div></div>");
    maxAppend++;

    $("i").append(addinput);
});

var maxAppend=0；
$（“#添加证书”）。单击（函数（）{
如果（maxAppend>=5）返回；
var addinput=$(
""+
“输入您的证书”+
"");
maxAppend++；
$（“i”）。追加（额外输入）；
});

var count=0；
$（“#添加证书”）。单击（函数（）{
如果（计数小于5）{
var$addinput=$（“输入您的证书”）；
$（“i”）。追加（$addinput）；
计数++；
}
});

var count=0；
$（“#添加证书”）。单击（函数（）{
如果（计数小于5）{
var$addinput=$（“输入您的证书”）；
$（“i”）。追加（$addinput）；
计数++；
}
});

管理这个问题的一个新方法是在添加5个元素后删除click处理程序

var count = 1;

$("#add-cert").click(function(){
    if(count < 5) {
        var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");

        $("i").append($addinput);

        count++;
    }
  else{
    $("#add-cert").off("click");   //remove click listener. 
 }
});

var计数=1；
$（“#添加证书”）。单击（函数（）{
如果（计数小于5）{
var$addinput=$（“输入您的证书”）；
$（“i”）。追加（$addinput）；
计数++；
}
否则{
$（“#添加证书”）.off（“单击”）；//删除单击侦听器。
}
});

管理这个问题的一个新方法是在添加5个元素后删除click处理程序

var count = 1;

$("#add-cert").click(function(){
    if(count < 5) {
        var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");

        $("i").append($addinput);

        count++;
    }
  else{
    $("#add-cert").off("click");   //remove click listener. 
 }
});

var计数=1；
$（“#添加证书”）。单击（函数（）{
如果（计数小于5）{
var$addinput=$（“输入您的证书”）；
$（“i”）。追加（$addinput）；
计数++；
}
否则{
$（“#添加证书”）.off（“单击”）；//删除单击侦听器。
}
});

不要给不同的输入相同的名称。你很接近了。只需将

if（num>5）

更改为

if（num<5）

（如果num小于5）就可以了。不要给不同的输入赋予相同的名称。你很接近了。只需将

if（num>5）

更改为

if（num<5）

（如果num小于5），在

$（）

中包装

附加输入没有任何好处。一根绳子很好用。不过，回答得很好@David SkyMesh您的代码工作正常，非常感谢。我是新来的，但我会记住这一点。谢谢大家的阅读和回答。1个问题为什么在
addinput
构造中添加“+”？要使其适合窄屏幕上的stackoverflow显示：-），当显示框确实滚动时，有时在移动设备上很难做到这一点。在
$（）
中包装
addInput
没有任何好处。一根绳子很好用。不过，回答得很好@David SkyMesh您的代码工作正常，非常感谢。我是新来的，但我会记住这一点。谢谢大家的阅读和回答。1个问题为什么在
addinput
构造中添加“+”？要使其适合窄屏幕上的stackoverflow显示：-），当显示框确实滚动时，有时在移动设备上很难做到这一点。代码是从上一个答案复制的。刚刚添加了我的one else语句。代码是从上一个答案复制的。刚刚添加了我的另一个声明。