如何实现一个简单的错误计数器jquery

Question

我有一些添加字段的代码，但目前它添加了无限的框。我怎样才能限制它的最大值为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
}

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

Answer 1

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

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

小提琴

Answer 2

与其在代码中嵌入'幻数'(参见:什么是幻数，为什么它不好?)，不如定义一个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都有例外，将代码中的所有其他数字定义为named是一个好主意常数。

Answer 3

这里我使用了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();
});

小提琴