Question

我有多个输入字段。我只希望一次展示一个。当用户完成输入信息并点击下一个按钮时，它将隐藏第一个输入并显示第二个输入。当他们再次点击它时，它将隐藏第二个输入并显示第三个输入，依此类推。我试图用hide（）/ show（）JQuery函数直接隐藏div和输入字段，但似乎无法让它们工作。这是我正在使用的结构的基本示例，非常感谢任何输入。

编辑：将JSBIN和示例代码更新为我试图开始工作的方法。

JSBIN: http://jsbin.com/wixiyaraxi/edit?html,output


    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>

    <!-- // should be VISABLE at the start and be HIDDEN when Next button is clicked. -->
    <div id="test1">
    <input type="text" id="test1" class="form-control" placeholder="Input 1:">
    </div>

    <!-- // should be HIDDEN at the start and be VISABLE when Next button is clicked. -->
    <!-- // when the Next button is clicked a second time should be HIDDEN.-->
    <div id="test2">
    <input type="text" id="test2" class="form-control" placeholder="Input 2:">  
    </div>

    <!-- // should be hidden at the start and show when Next button is clicked a second time. -->
    <div id="test3">
    <input type="text" id="test3" class="form-control" placeholder="Input 3:">  
    </div>


    <button type="button" class="btn btn-warning">Next</button>
        </div>

    </body>
    </html>

<script>

$("#button").click(function(){
    $("#test1").hide();
    $("#test2").show();
})
</script>

Answer 1

你可以这样做：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<!-- // should be VISABLE at the start and be HIDDEN when Next button is clicked. -->
<div class="test1">
    <input type="text" id="test1" class="form-control" placeholder="Input 1:">
</div>

<!-- // should be HIDDEN at the start and be VISABLE when Next button is clicked. -->
<!-- // when the Next button is clicked a second time should be HIDDEN.-->
<div class="test2">
    <input type="text" id="test2" class="form-control" placeholder="Input 2:">  
</div>

<!-- // should be hidden at the start and show when Next button is clicked a second time. -->
<div class="test3">
    <input type="text" id="test3" class="form-control" placeholder="Input 3:">  
</div>


<button type="button" class="btn btn-warning">Next</button>
</div>
  <script type="text/javascript">
    jQuery(document).ready(function($){
        var i = 1;
        $(".form-control").each(function(){
            $(this).hide();
        });
        $("#test" + i).show();

        $(".btn").click(function(){
            if(i < 3){
                i++;
            }
            $(".form-control").hide();
            $("#test" + i).show();
        });
    });
  </script>
</body>
</html>

使用onclick或类似函数隐藏和显示输入字段

1 个答案: