限制创建的文本字段的数量答案

【问题标题】：Limiting the number of text fields created限制创建的文本字段的数量
【发布时间】：2015-11-22 06:55:12
【问题描述】：

这是我在别处抄袭的脚本，并在 Stack Overflow 的帮助下对其他几个问题进行了修改，使其最多包含 10 个字段。

我对 JS/jQuery 的了解很少。我很害怕我做的不好或做错了。您能否告诉我这是正确的做法，或者是否有其他方式我应该以不同的方式来做？

我需要确保创建的文本字段的最大数量限制为最多 10 个。

这是一个演示和JSFiddle。

jQuery(document).ready(function($) {
    var max_fields = 10; 
    var x = 1; 

    $('.my-form .add-box').click(function() {
        var n = $('.text-box').length + 1;

        if(x < max_fields) {
            var box_html = $('<p class="text-box"><label for="box' + n + '">Name <span class="box-number">' + n + '</span></label> <input type="text" name="on' + (n - 1) + '" value="" id="box' + n + '" /> <a href="#" class="remove-box">Remove</a></p>');
            box_html.hide();
            $('.my-form p.text-box:last').after(box_html);
            box_html.fadeIn('slow');
            x++; 
        }
    });

    $('.my-form').on('click', '.remove-box', function() {
        $(this).parent().css('background-color', '#FF6C6C').fadeOut("slow", function() {
            $(this).remove();
            $('.text-box').each(function(index) {
                var label = $(this).children('label');
                label.attr('for', 'box' + (index + 1));
                label.children('.box-number').text(index + 1);
                $(this).children('input').attr({
                    name: 'on' + index,
                    id: 'box' + (index + 1)
                });
            });
        });
        return false;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="my-form">
    <p class="text-box">
        <label for="box1">Name <span class="box-number">1</span></label>
        <input type="text" name="on0" value="" id="box1" />
        <a class="add-box" href="#">Add More Names</a>
    </p>
</div>

【问题讨论】：

您的演示对我来说效果很好。你在担心什么？由于 JavaScript 是客户端，如果用户真的想创建超过 10 个字段，您无法阻止这种情况的发生。如果这将是一个严重的问题，您所能做的就是进行服务器端验证。

标签： javascript beginner jquery form dom

【解决方案1】：

无聊，所以我做了一些我提到的改进（在移到代码审查时消失的 cmets 中）：

使用 jQuery 快捷方式 DOM-ready 处理程序

为您的 DOM 准备就绪的便捷捷径，本地范围 $ 只是 jQuery(function($){...});

将模板存储在 HTML 中，而不是 JavaScript 字符串：

<script id="template" type="text/template">
    <p class="text-box">
       <label for="box{n}">Name <span class="box-number">{n}</span></label> <input type="text" name="on{-1}" value="" id="box{n}" /> <a href="#" class="remove-box">Remove</a>
    </p>
</script>

并像这样访问：

var box_html = $('#template').html().replace(/{n}/g, n).replace(/{-1}/g, n-1);
var $box = $(box_html);

在需要时计算当前项目

var n = $('.text-box').length + 1;
if (n <= max_fields) {

仅限于当前的输入“组”：

var $form = $(this).closest('.my-form');
$('p.text-box:last', $form).after($box);

这也意味着它现在可以处理多组输入，每组都有不同的名称/ID 前缀。

尽可能合并操作：

$box.hide().fadeIn('slow');

把它们放在一起：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/q2emvzdd/4/

注意事项：

父表单需要提供前缀（例如数据属性），以便每组输入都有唯一的 ID 和名称。这还没有应用于第一个条目，但我现在得走了，所以你要完成一些事情:)

【讨论】：