Question

这是我的javascript：

$('#2').hide();

$("input").keyup(function () {
    var value = $(this).val();
    if($(this).val().match()) {
        $('#2').show();
    } else {
        $('#2').hide();
    }
});

在我的HTML中，我有5个输入。我想要隐藏所有4个输入，所以当我在＃1输入中输入一个值时，如果我在＃2输入中输入一个值，则显示＃2空输入，它显示＃3空输入等...

以下是演示：http://jsfiddle.net/L7ebh/

Answer 1

怎么样：

http://jsfiddle.net/L7ebh/15/

Answer 2

尝试下面的代码 - （将id =“1”添加到第一个输入中）

$('#2, #3, #4, #5').hide();

$("input").keyup(function () { 
   var value = $(this).val();
   var nextid = $(this).attr("id");
   nextid++;
   if($(this).val().match()) {
     $('#' + nextid).show();
   } else {
     $('#' + nextid).hide();
   }
});

注意 - 我会使用display：none隐藏输入，因此当页面加载时它们会显示为隐藏。

Answer 3

这是您正在寻找的。你将需要一些额外的CSS，我会根据你的标记做出一些相当大的假设......或者缺少它。

http://jsfiddle.net/L7ebh/16/

我留在评论中，这样你就可以理解发生了什么。

重要的是要注意使用数字作为ID是一个非常糟糕的主意并且无效。我在示例中使用了备用ID。

Answer 4

这是

http://jsfiddle.net/L7ebh/17/

如果你清空2，它支持隐藏3,4,5。

realname <input id="1" type="text"/><br> <!-- ID 1 inserted -->
username <input id="2" type="text"/><br>
place  <input id="3" type="text"/><br>
category <input id="4" type="text"/><br>
5+6=<input id="5" type="text"/><br>

$('#2').hide();
$('#3').hide();
$('#4').hide();
$('#5').hide();
max = 5;

$("input").keyup(function () {
    value = $(this).val();   
    id = parseInt($(this).attr('id'));   
    nextid = id + 1;   
    if(value) {
        $('#' + nextid).show().keyup();
    } else {
        for(i = nextid; i <= max; i++){
            $('#' + i).hide();
        }
    }
});

输入第一个输入后显示下一个输入

4 个答案: