Question

我正在尝试编写一个表单生成器，用户可以在其中生成注册表单。我需要限制用户可以创建的项目数量，但是他们还需要删除项目。

最初我有

var limit = 5;
var counter = 0;

if (counter == limit)  {

但是，当用户删除项目时，计数器保持不变，因此他们无法用新项目替换已删除的表单元素。所以我想要做的是计算当前活动的项目数。我尝试通过给每个新元素一个类（.kid），然后计算该类的div数量，但它没有工作。

有人能指出我正确的方向吗？这是我到目前为止所做的，但它不起作用。

var limit = 6;
var num = $('.kid').length;

   function addAllInputs(divName, inputType){

    if (num == limit)  {
        alert("You have all ready added 6 form items");
    }
    else { 
    var newdiv = document.createElement('div');
        newdiv.setAttribute('id', 'child' + (counter + 1));
        newdiv.setAttribute('class', 'kid' );

干杯！

Answer 1

您需要在闭包中捕获当前计数器。用户删除项目时减少计数器，并在创建项目后增加计数器。您的代码示例没有透露您如何处理删除，但我会尝试通过一个小代码片段说明我的意思：

$(document).ready(function () {
    var limit = 5;
    var counter = $('.kid').length;

    $('#triggers_delete').click(function () {
        /* delete the item */
        counter--;
    });

    $('#triggers_creation').click(function () {
        if (counter == limit) {
            alert('Limit reached');
            return false;
        }
        /* somehow determine divName and inputType
           and create the element */    
        addAllInputs(divName, inputType);
        counter++;
    });
});

function addAllInputs(divName, inputType) {
    /* just create the item here */
}

Answer 2

这样的方法有什么理由不起作用吗？每次添加新DIV时，都会检查当前集合的长度，以查看它是否达到或超过限制。当然，如果表单的其他DIVs具有相同的类ID，则可能需要优化选择器的范围。

   var limit = 6;

   function addAllInputs(divName, inputType){

    if ( $('.kid').length >= limit )  {
        alert("You have all ready added 6 form items");
    }
    else { 
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', 'child' + (counter + 1));
        newdiv.setAttribute('class', 'kid' );
    }

编辑：只是一个注释，我假设您要么从DOM中删除已删除的项目，要么将它们与具有不同类或属性的活动项目区分开来。否则，我建议的方法将返回包含已删除项目的计数。

Answer 3

唯一真正的问题是您的num变量是在函数之外定义的。它将在页面加载时获得.kid元素的数量，并且不会更新。只需在功能中移动此行：

   var limit = 6;

   function addAllInputs(divName, inputType){
      var num = $('.kid').length;
      ...

Answer 4

试试这个

var limit = 6;

function addAllInputs(divName, inputType){

    if ($('.kid').length == limit)  {
        alert("You have all ready added 6 form items");
    }
    else { 
    var newdiv = $('div', { 'id': 'child' + (counter + 1), 'class': 'kid' } );
    $("inputContainerSelector").append(newdiv);
}

如何计算动态创建的div

4 个答案: