Javascript 计算字段的数量并限制为10

我有一些代码，它使用

this

允许保留相同的函数代码，但将其应用于可以在屏幕上看到的不同表单元素

//最新版本
var maxFields=10，
currentFields=1；
$（'.form'）。在（'单击'，'.add'，函数（）{
var value_src=$（this.prev（）；
var container=$（this.parent（）.prev（）；
如果（$.trim（value_src.val（））！=“”）{
if（当前字段<最大字段）{
var value=value_src.val（）；
var html=''+
'' +
'' +
'';
$（html）.appendTo（容器）；
值_src.val（“”）；
currentFields++；
}否则{
警报（“您试图添加一个字段，但已存在“+maxFields”）；
}
}否则{
警报（“您没有输入任何内容”）；
}
})
.on（'click'，'remove'，函数（）{
$（this.parents（'.line'）.remove（）；
当前字段--；
});

我的问题是，我仍然希望能够限制每个部分只有10个

，但目前每个部分共享计数器，因此5个要求和5个资格将触发10个限制

---

有没有一种干净的方法可以使每个部分的输入字段计数器保持独立？

您需要做的是以上下文敏感的方式存储每个列表的当前子项数。有几种方法可以将其结构化（使用MVC库或类似的工具会很容易），但最简单的代码解决方案是只使用DOM。因此，与其使用全局

currentFields

变量，不如使用

container.children（）.length

获取当前操作列表中的注释数

//最新版本
var maxFields=10；
$（'.form'）。在（'单击'，'.add'，函数（）{
var value_src=$（this.prev（）；
var container=$（this.parent（）.prev（）；
如果（$.trim（value_src.val（））！=“”）{
if（container.children（）.length

您可以使用

占位符

属性来识别哪个按钮触发了该功能

value_src.attr('placeholder');

然后可以使用此字符串访问关联数组中的三个不同计数器

代码

var maxFields=10；
var currentFields=新对象；
$（'.form'）。在（'单击'，'.add'，函数（）{
var value_src=$（this.prev（）；
var container=$（this.parent（）.prev（）；
如果（$.trim（value_src.val（））！=“”）{
var identity=value_src.attr（“占位符”）；
if（currentFields[identity]==未定义）
currentFields[identity]=0；
if（currentFields[identity]

---

jsIDLE:

您可以向每行添加一个类，如

表单行

var html = '<div class="line form-row">' +
            '<input id="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

小提琴

value_src.attr('placeholder');

var maxFields = 10;
var currentFields = new Object;

$('.form').on('click', '.add', function () {
      var value_src = $(this).prev();
      var container = $(this).parent().prev();
    if ($.trim(value_src.val()) != '') {
       var identity =      value_src.attr('placeholder');       

        if(currentFields[identity] == undefined)
        currentFields[identity] = 0;

        if (currentFields[identity] < maxFields)                          {
            var value = value_src.val();
            var html = '<div class="line">' +
                '<input id="accepted" type="text" value="' + value + '" />' +
                '<input type="button" value="X" class="remove" />' +
                '</div>';

            $(html).appendTo(container);
            value_src.val('');
            currentFields[identity]++;
        } else {
            alert("You tried to add a field when there are already " + maxFields);
        } 
    } else {
        alert("You didn't enter anything");
    }

})
    .on('click', '.remove', function () {
       $(this).parents('.line').remove();
    currentFields--;
});

var html = '<div class="line form-row">' +
            '<input id="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

console.log($(container).find('.form-row').length);
// Use +1 because initially it is 0