顯示下一個輸入的第一輸入

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