javascript - 在填充时显示隐藏的文本框

Question

我有一个包含 30 个文本框的页面，其 ID 大致与 _Q0/_Q1/_Q2/_Q3 等相关

我正在尝试设计一个 JS 代码，它会隐藏除第一个框以外的所有框，然后在填写前一个文本框时显示下一个文本框。

这是我的代码:

$(function () {
    for(var i=1;i<30;i++){
    var t = i
        document.getElementById("_Q" + t).style.visibility = 'hidden';
    };

    var idNumber = 0
    document.getElementById("_Q"+idNumber).onKeyUp(function(){return boxAdder()});

    function boxAdder(){
        idNumber = idNumber+1;
        document.getElementById("_Q" + idNumber).style.visibility = 'block';
        document.getElementById("_Q" + idNumber).onKeyUp(function(){return boxAdder()});
    };      

}); 

到目前为止，除了第一个框外，所有框都被隐藏了。但是，当我写入第一个框时，什么也没有发生。我不完全确定这段代码哪里出错了。

编辑:示例 JSFiddle:http://jsfiddle.net/8b7pH/3/

解决了!这是最终代码:

$(function () {
    for(var i=1;i<=5;i++){
    var t = i;
        document.getElementById("_Q" + t).style.visibility = 'hidden';
       // document.getElementById("_Q" + idNumber).onkeyup = function(){console.log("hi"); return boxAdder(t+1);};
    }

    var idNumber = 0;
    document.getElementById("_Q0").onkeyup = function(){console.log("hi"); return boxAdder(0);};

    function boxAdder(numm){
        console.log("ho");
        //idNumber = idNumber+1;
        document.getElementById("_Q" + numm).style.visibility = 'visible';
        document.getElementById("_Q" + numm).onkeyup = function(){return boxAdder(numm+1);};
    }


});

Answer 1

这就是你想要的:

$(function () {
    var $boxes = $("[id^=_Q]").hide().keyup(function(){   //Hide all, then attach keyup
       var i = $(this).index();  //Index of the box being typed
       $boxes.eq(i+1).show();    //Get and show next textbox
    });
    $boxes.first().show();  //Show next textbox
});

Btw $("[id^=_Q]") 选择所有 id 以 _Q 开头的元素

在这里工作正常:http://jsfiddle.net/edgarinvillegas/8b7pH/7/

干杯