0

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

//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 限制。

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

4

3 回答 3

2

您需要做的是以上下文相关的方式存储每个列表的当前子项数量。有几种方法可以构建它（使用 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();
});
于 2013-06-19T16:17:48.427 回答
0

您可以使用该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/

于 2013-06-19T16:20:16.700 回答
0

您可以为每一行添加一个类，例如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/

于 2013-06-19T16:22:09.883 回答