php - jQuery字段的最大值和表单中的最小值

Question

我对 jQuery 有点陌生，所以我有一些问题：

我有一个带有 2 个链接的表单，您可以在其中添加 1 个字段并删除 1 个字段。

1. 但问题是我想停在 10 个字段，所以你最多可以添加 10 个字段？

2. 第二个问题是它如何在至少 1 个字段处停止，现在如果您一直单击删除，它会将每个字段删除为 0？

3. 最后一个问题我该怎么做，所以当我按下提交按钮时，我想记住你在按下提交之前有多少个字段？

我希望有人可以帮助我，这是我非常需要的东西 :-D

jQuery：

var i = $('input').size() + 1;
max = 10;

$('#add').click(function() {
    $('<div><input type="text" class="field" name="dynamic[]" value="Some text..." /></div>').fadeIn('slow').appendTo('.inputs');
    i++;
});

$('#remove').click(function() {
if(i > 1) {
    $('.field:last').remove();
    i--; 
}
});

HTML：

<a href="#" id="add">Add +1</a> | <a href="#" id="remove">Remove -1</a>
<form method="post">
    <div class="inputs">
        <div>
            <input type="text" name="dynamic[]" class="field" value="Some text..."/></div>
        </div>
    <input name="submit" type="submit" class="submit" value="Submit"/>
</form>

Answer 1

您可以使用$('.field').length“字段”类获取元素的数量（此处提供更具体的类名）。因此，如果您将该类专门用于输入，则可以将其用作可靠计数。

if ($('.field').length <= 10) {
    //Add a new one
} else {
    //Already 10
}

Answer 2

因为其他两个我的回答是一样的。设置一个小提琴：

http://fiddle.jshell.net/Aq7rS/

var i = $('input').size() + 1;
max = 10;

$('#add').click(function() {

if($('.field').length < 11){
    $('<div><input type="text" class="field" name="dynamic[]" value="Some text..." /></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    }

});

$('#remove').click(function() {
    if($('.field').length > 1){
        if(i > 1) {
            $('.field:last').remove();
            i--; 
        }

    }
});

Answer 3

$('#add').click(function() {
   if ($('.field').length <= 10) {
    $('<div><input type="text" class="field" name="dynamic[]" value="Some text..." /></div>').fadeIn('slow').appendTo('.inputs');
    i++;
 }else
   alert("10 Completed");
});

$('#remove').click(function() {
  if ($('.field').length < 1) {
    $('.field:last').remove();
    i--; 
   }else
     alert("only one");
});