Question

我有五个表单字段，最初不会预先填充任何值。

如果用户填写其中一个字段，则下次访问该表单时，该字段将使用上一次访问中的值预先填充。

以下是我尝试的内容：我想创建一个循环遍历字段的循环。它将始终检查是否有空字段。找到2个空字段后，循环将停止并仅显示这2个空字段，而其他字段则隐藏。

这是我到目前为止所做的...我只是无法想象如何在迭代两个字段后停止，

HTML：

<form action="">
<input id="first" type="text" value="" />
<input id="second" type="text" value="" />
<input id="third" type="text" value="" />
<input id="fourth" type="text" value="" />
<input id="fifth" type="text" value="" />
</form>

JS：

        $(document).ready(function() {
        $('input').hide();

        var firstValue = $('input[id="first"]').val(),
        secondValue    = $('input[id="second"]').val(),
        thirdValue     = $('input[id="third"]').val(),
        fourthValue    = $('input[id="fourth"]').val(),
        fifthValue     = $('input[id="fifth"]').val();

        var firstField = $('input[id="first"]'),
        secondField    = $('input[id="second"]'),
        thirdField     = $('input[id="third"]'),
        fourthField    = $('input[id="fourth"]'),
        fifthField     = $('input[id="fifth"]');

        var formValues = [firstValue, secondValue, thirdValue, fourthValue, fifthValue];
        var fieldIds = [firstField, secondField, thirdField, fourthField, fifthField];

        for (var i = 0; i < fieldIds.length; i++) {
            for (var i = 0; i < formValues.length; i++) {
                if ( formValues[i] === '' ) {
                    fieldIds[i].show();
                    return false;
                }
            }           
        }

    });

Answer 1

$(document).ready(function() {
    $('input').hide().each( function(){
        var index=0; //initilialize the counter
        if( $(this).val().length ){ //check for input's length
            if(index < 2) {
                $(this).show();
                index=index+1 //or index++ if you like
            }
            else {
                break;
            }
        }
    }
)};

如果您想在符合条件的输入群体中加入select和textarea字段，请使用$(':input').hide().each(...)。如果您的网页上有多个表单，您也可以将其包含在选择器中：$('#intended_form').find(':input').hide().each(...)。

http://api.jquery.com/each/

Answer 2

获取所有输入字段，取前两个空字段并显示它们;最后，把它的补充隐藏起来：

var $inputFields = $('form input:text'),
$emptyFields = $inputFields
  .filter(function() { return this.value == ''; })
  .slice(0, 2)
  .show();

$inputFields
  .not($emptyFields)
  .hide();

Demo

Answer 3

我认为杰克提供了最好的答案，但这也应该有效。在这里，我使用第二个计数器j并在j % 2 == 0时打破循环，所以此时它找到了两个空字段。这被称为模数或modulo运算符。

$(document).ready(function() {
        $('input').hide();

        var firstValue = $('input[id="first"]').val(),
        secondValue    = $('input[id="second"]').val(),
        thirdValue     = $('input[id="third"]').val(),
        fourthValue    = $('input[id="fourth"]').val(),
        fifthValue     = $('input[id="fifth"]').val();

        var firstField = $('input[id="first"]'),
        secondField    = $('input[id="second"]'),
        thirdField     = $('input[id="third"]'),
        fourthField    = $('input[id="fourth"]'),
        fifthField     = $('input[id="fifth"]');

        var formValues = [firstValue, secondValue, thirdValue, fourthValue, fifthValue];
        var fieldIds = [firstField, secondField, thirdField, fourthField, fifthField];
        var j = 0;
        for (var i = 1; i < fieldIds.length; i++) {
            if ( formValues[i] === '' ) {
                fieldIds[i].show();
                j++;//we found an empty field
                if (j % 2 == 0)
                {
                    break;
                }
            }
        }
});

循环输入字段;两次迭代后停止

3 个答案: