使用onclick或类似功能隐藏和显示输入字段

-1

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

编辑：更新了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>

来源

2016-08-22 Pyreal

看起来你忘了包含你尝试的JavaScript使用。请更新您的问题以包含此内容，否则应该关闭[off-topic（＃1）]（/ help/on-topic） – zzzzBov

你可以这样做：

<!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>

来源

2016-08-22 18:08:33 Sateesh

试试这个，给你<div>输入容器类“输入”，隐藏一切，但在CSS中的第一个孩子。一旦你有了这个，你的按钮点击处理程序可以像这样简单：获取当前可见的输入格，隐藏它，然后显示下一个

$(function() { 
    $('button').on('click', function() { 
     var $cur = $('div.input:visible'); 
     $cur.hide(); 
     $cur.next().show(); 
    }); 
});

来源

2016-08-22 18:08:56

这只隐藏可见输入是否正确？它不显示那些隐藏起来的样式？（style =“display：none”） – Pyreal

使用onclick或类似功能隐藏和显示输入字段

回答

相关问题