javascript - 如何仅当先前输入具有有效值时才显示输入字段？

Question

我的表单需要 3 到 10 个文本输入项。当表单首次加载时，它将显示 3 个输入(最少)。

我想有效地显示输入行，因为前一行具有有效值(例如，假设大于 3 个字符)。因此，如果您填写前 3 行，您将自动看到第四个可选输入行。

你能帮我在 jQuery 中有效地循环浏览这个快速列表吗？

HTML:

<input type="text" class="item_1" name="item_1">
<input type="text" class="item_2" name="item_2">
<input type="text" class="item_3" name="item_3">
<input type="text" class="item_4" name="item_4">
<input type="text" class="item_5" name="item_5">
<input type="text" class="item_6" name="item_6">
<input type="text" class="item_7" name="item_7">
<input type="text" class="item_8" name="item_8">
<input type="text" class="item_9" name="item_9">
<input type="text" class="item_10" name="item_10">

CSS:

.item_4,.item_5,.item_6,.item_7,.item_8,.item_9,.item_10 { display:none }

Answer 1

这非常简单 - 如果您让 jQuery 的链接完成工作，您甚至不需要循环。我会做类似的事情:

$("#myform input").change(function(){ //If an input in your form is changed,
    if ($(this).val() == 42){ //replace with your validation logic :)
         $(this).next('input').show(); //This shows the next sibling element to the triggering element
    } else { //but if it fails validation...
         $(this).nextAll('input').hide().val(""); //hide them and delete the contents to stop the form from uploading invalidated data!
    }
});

这符合您的要求，并且为了获得奖励积分，如果其前任后来被更改为无效，它会隐藏并清空后面的框。