0

我有一些添加字段的代码，但目前它添加了无限的框。如何将其限制为最多 10 个。理想情况下，我希望它在我尝试在 10 之后添加更多时发出警报。

http://jsfiddle.net/spadez/9sX6X/13/

var container = $('.copies'),
    value_src = $('#current');

$('.copy_form')
    .on('click', '.add', function(){
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
        '</div>';

        $(html).appendTo(container);
        value_src.val('');
    })
    .on('click', '.remove', function(){
        $(this).parents('.line').remove();
    });

我知道的代码：

alert("Only 10 allowed");

我尝试过的代码：

var i = 0 // Set counter
i++ // Increment counter
if(i > 10) {
    alert("Only 10 allowed");
} 
else {
    // code to be executed
}

这是我的第一个脚本之一，我想知道是否可以在正确的方法上获得帮助，因为我上面尝试的代码破坏了我当前的工作代码。

4

3 回答 3

2

在您的点击处理程序中，检查具有类行的元素数量是否小于 10。

if ($('.line').length < 10) { 
    //execute code
}else{
    alert('Only 10 allowed');
    return false;
}

小提琴

于 2013-06-19T12:24:29.367 回答
1

与其在代码中嵌入“幻数”（请参阅​​：什么是幻数，为什么它不好？），而是定义一个 maxFields 变量并始终保持计数，每次尝试添加另一个值时检查该值。

这使您的代码更易于移植和被其他人重用，或者当您想要 20 个字段时，您可以将其用于另一个用例。

它读起来也更像英语（当前字段小于最大字段），这导致了自我文档。

http://jsfiddle.net/9sX6X/21/

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input class="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);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

来自维基百科：

幻数一词也指在源代码中直接使用数字而不作解释的不良编程习惯。在大多数情况下，这会使程序更难阅读、理解和维护。尽管大多数指南对数字 0 和 1 都有例外，但最好将代码中的所有其他数字定义为命名常量。

于 2013-06-19T12:30:34.857 回答
0

这里我使用了 jQuery 的 .length 方法。

var container = $('.copies'),
value_src = $('#current');

$('.copy_form')
.on('click', '.add', function(){
    if ($('.accepted').length < 10)
    {
    var value = value_src.val();
    var html = '<div class="line">' +
        '<input class="accepted" type="text" value="' + value + '" />' +
        '<input type="button" value="X" class="remove" />' +
    '</div>';

    $(html).appendTo(container);
    value_src.val('');
    }
    else
    {
        alert("Only 10 allowed");
    }
})
.on('click', '.remove', function(){
    $(this).parents('.line').remove();
});

小提琴

于 2013-06-19T12:29:42.837 回答