jQuery字段的最大值和最小值的形式 - jQuery max value of fields and min in form

jQuery max value of fields and min in form

本文关键字：最小值最大值字段 jQuery | 更新日期: 2023-09-27

我对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>

您可以使用$('.field').length来获取带有类'字段'的元素数量(此处使用更具体的类名有所帮助)。因此，如果您将该类专门用于输入，则可以将其用作固体计数。

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

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

和另外两个答案一样。设置小提琴:

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