Javascript 限制字段集中的输入

我试图在我的webstore中创建一个部分，客户可以在其中“构建”自己的捆绑包并选择5个项目的任意组合

我有一组按钮，当点击时，会将它们的值添加到一个字段集中，同时还会添加一个按钮，以防他们误点击或改变主意时将其删除

所有组件都可以正常工作，但我不知道如何将字段集限制为只有五项。有没有办法计数行数，然后停止接受输入 五次之后还是五次寻找“移除”

我对编码还是相当陌生，不太确定什么是可能的。 该输入最终将以表单形式提交

下面是我的Javascript代码，我已经尝试过了：

$(document).ready(function () {
    $(".buttons").click(function () {
        var intId = $().length + 1;
        var item = $(this).html();
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
        removeButton.click(function () {
            $(this).parent().remove();
        });
        fieldWrapper.append(size);
        fieldWrapper.append(removeButton);
        $("#buildyourkit").append(fieldWrapper);
    });
});

$（文档）.ready（函数（）{
$（“.buttons”）。单击（函数（）{
var intId=$（）。长度+1；
var item=$（this.html（）；
var fieldWrapper=$（“”）；
var removeButton=$（“”）；
移除按钮。单击（函数（）{
$（this.parent（）.remove（）；
});
fieldWrapper.append（大小）；
fieldWrapper.append（removeButton）；
$（“#buildyourkit”）.append（fieldWrapper）；
});
});

您可以拥有一个全局变量，该变量将在每次添加字段时向上计数并禁用所有按钮（如果超过

5

），在每次删除字段时向下计数并启用所有按钮

另外，只设置一个实时处理程序来监听任何移除按钮，比创建一个新函数并为每个按钮绑定一个新的侦听器要好一些，如我所演示的；但这不是强制性的（你的方式也有效，因为它只有5个元素）

$（文档）.ready（函数（）{
var buttonMaxID=0；
var buttonCount=0；
$（'buildyourkit'）。在（'click'，'remove'，函数（）{
$（this.parent（）.remove（）；
如果（按钮计数-->=5）{
$（'.buttons'）.prop（'disabled'，false）；
}
});
$（“.buttons”）。单击（函数（）{
如果（++按钮计数>=5）{
$（'.buttons'）.prop（'disabled'，true）；
}
var item=$（this.html（）；
var fieldWrapper=$（“”）；
var removeButton=$（“”）；
fieldWrapper.append（大小）；
fieldWrapper.append（removeButton）；
$（“#buildyourkit”）.append（fieldWrapper）；
});
});

这将为您提供当前添加到列表中的元素数量。在添加新的之前，请确保仍有空间容纳另一个

$("fieldset .fieldwrapper").length

---

我用叉子叉了你的头发。只需在向字段集添加新项时查看控制台。

我建议设计一个管理器类来维护所有必须与UI交互的函数/方法。这允许您在一个位置定义数据集，并将UI绑定保持在一个位置。通过这样做，您可以为自己建立一个更干净的代码库，简化重构，并快速修改代码。而且，你得到了所有这些好处，没有任何全局变量，这是另一个巨大的好处

代码看起来确实更大，但是一旦您理解了管理器的简单性，您就会看到我上面概述的可能性

$(document).ready(function () {
    //Create a new Kit Manager
    var kitManager = new KitManager();

    $(".buttons").click(function () {
        kitManager.add(this);
    });

    $(".report").click(function () {
        kitManager.getKit();
    });
});

function KitManager()
{
    //Static amount of items to return
    var MAX_ITEMS = 5;
    //Where the items should be visually displayed on the UI
    var kitLegend = $("#buildyourkit");
    //Internal array for storing the items added
    var items = []

    function add(element)
    {       
        if(items.length < MAX_ITEMS)
        {
            var itemNumber = items.length + 1;         
            var item = $(element).html();
            var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + itemNumber + "\"/>");
            var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />"); 

            //Add item to the array collection
            items.push(item);

            //Bind a remove function to the newly created button
            removeButton.click(function () {
                kitLegend[0].removeChild(fieldWrapper[0]);
                items.splice(itemNumber, 1); 
            });

            //Append UI components to container
            fieldWrapper.append(item).append(removeButton);

            //Append to main legend
            kitLegend.append(fieldWrapper); 
        }
        else
        {
            //Simple alert to user
            alert('You\'ve Reached The Maximum Number of Items');
        }
    }
    //Simple function for demonstration of a reporting feature
    //or potential method for returning the stored items
    function getKit()
    {
        for(var i=0,length=items.length;i <length;i++)
        {
            console.log(items[i]);
        }
    }

    //Expose public method call
    return {
        add:add,
        getKit: getKit
    };
}

$（文档）.ready（函数（）{
//创建一个新的工具包管理器
var kitManager=new kitManager（）；
$（“.buttons”）。单击（函数（）{
kitManager.add（这个）；
});
$（“.report”）。单击（函数（）{
kitManager.getKit（）；
});
});
功能管理器（）
{
//要返回的项目的静态数量
var MAX_项目=5；
//项目应在UI上直观显示的位置
var kitLegend=$（“#buildyourkit”）；
//用于存储添加的项目的内部数组
变量项=[]
函数添加（元素）
{       
如果（项目长度<最大项目）
{
var itemNumber=items.length+1；
var item=$（element.html（）；
var fieldWrapper=$（“”）；
var removeButton=$（“”）；
//将项添加到数组集合
项目。推送（项目）；
//将删除函数绑定到新创建的按钮
移除按钮。单击（函数（）{
kitLegend[0]。removeChild（fieldWrapper[0]）；
项目.拼接（项目编号，1）；
});
//将UI组件附加到容器
fieldWrapper.append（item）.append（removeButton）；
//附加到主图例
kitLegend.append（fieldWrapper）；
}
其他的
{
//向用户发出简单警报
警报（“您已达到最大项目数”）；
}
}
//用于演示报告功能的简单功能
//或返回存储项的潜在方法
函数getKit（）
{
对于（var i=0，length=items.length；当您指的是“JavaScript”时，请不要说“Java”，这两个词是完全不同的。另外，
$（）。length
总是
0
。这只是逻辑问题。请看一下这个：
$(document).ready(function () {
    //Create a new Kit Manager
    var kitManager = new KitManager();

    $(".buttons").click(function () {
        kitManager.add(this);
    });

    $(".report").click(function () {
        kitManager.getKit();
    });
});

function KitManager()
{
    //Static amount of items to return
    var MAX_ITEMS = 5;
    //Where the items should be visually displayed on the UI
    var kitLegend = $("#buildyourkit");
    //Internal array for storing the items added
    var items = []

    function add(element)
    {       
        if(items.length < MAX_ITEMS)
        {
            var itemNumber = items.length + 1;         
            var item = $(element).html();
            var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + itemNumber + "\"/>");
            var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />"); 

            //Add item to the array collection
            items.push(item);

            //Bind a remove function to the newly created button
            removeButton.click(function () {
                kitLegend[0].removeChild(fieldWrapper[0]);
                items.splice(itemNumber, 1); 
            });

            //Append UI components to container
            fieldWrapper.append(item).append(removeButton);

            //Append to main legend
            kitLegend.append(fieldWrapper); 
        }
        else
        {
            //Simple alert to user
            alert('You\'ve Reached The Maximum Number of Items');
        }
    }
    //Simple function for demonstration of a reporting feature
    //or potential method for returning the stored items
    function getKit()
    {
        for(var i=0,length=items.length;i <length;i++)
        {
            console.log(items[i]);
        }
    }

    //Expose public method call
    return {
        add:add,
        getKit: getKit
    };
}