javascript - 计算字段数量并限制为 10

Question

我有一些使用 this 的代码允许保留相同的功能代码，但将其应用于不同的表单元素，可以在 a jsFiddle demo 上看到

//latest
var maxFields = 10,
    currentFields = 1;

$('.form').on('click', '.add', function () {
      var value_src = $(this).prev();
       var container = $(this).parent().prev();
    if ($.trim(value_src.val()) != '') {
        if (currentFields < 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++;
        } 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--;
});

我的问题是我仍然希望能够将每个部分限制为只有 10 <inputs> ，但目前每个部门共享柜台，因此要求 5 名和资格 5 名将触发 10 名限制。

是否有一种干净的方法可以将每个部分的输入字段计数器分开？

Answer 1

您需要做的是以上下文相关的方式存储每个列表的当前子项数量。有几种方法可以构建它(使用 MVC 库或类似库很容易)，但最简单的代码解决方案是仅使用 DOM。因此，不要使用全局 currentFields 变量，而是使用 container.children().length 来获取当前正在操作的列表中的注释数量。

http://jsfiddle.net/9sX6X/70/

//latest
var maxFields = 10;

$('.form').on('click', '.add', function () {
      var value_src = $(this).prev();
       var container = $(this).parent().prev();
    if ($.trim(value_src.val()) != '') {
        if (container.children().length < 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('');
        } 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();
});