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

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

注 - I W应该使用display来隐藏输入：没有CSS，这样当页面加载时它们就会隐藏起来。

Answer 3

这是你在找什么。你将需要一些额外的CSS，并根据你的标记做出一些非常大的假设......或缺乏这些假设。

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

我留下评论，所以你可以明白是怎么回事。

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

Answer 4

这

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

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

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