Question

我有一些代码可以添加字段，但目前它增加了大量的框。我怎样才能将它限制为最多10个。理想情况下，当我尝试在10之后添加更多时，它会发出警报。

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;
}

Fiddle

Answer 2

不是在代码中嵌入“幻数”（请参阅：What is a magic number, and why is it bad?），而是定义一个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都有例外，将代码中的所有其他数字定义为命名是个好主意常数。

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();
});

Fiddle

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

3 个答案: