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();
});

Answer 2

您可以使用placeholder属性来识别触发该功能的按钮。

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--;
});

JSFiddle：http://jsfiddle.net/9sX6X/73/

Answer 3

您可以为每一行添加一个类，例如form-row

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

小提琴 http://jsfiddle.net/9sX6X/69/

计算字段数并限制为10

3 个答案:

代码