Question

我对jQuery有点新意，所以我有一些问题：

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

但问题是我想停在10个字段，所以你最多可以添加10个字段吗？
第二个问题是如何在最少1个字段停止，现在如果你一直点击删除它会将每个字段删除为0？
最后一个问题我怎么办，所以当我按下提交按钮时，我想记住你在按下提交之前有多少个字段？

我希望有人可以帮助我，这是我需要的东西:-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

$('#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");
});

Answer 3

另外两个答案我的是相同的。设置一个小提琴：

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

    }
});

jQuery字段的最大值和表单中的min

3 个答案: