我有多个输入字段。我只想一次显示一个。当用户完成输入信息并点击下一步按钮时，它将隐藏第一个输入并显示第二个输入。当他们再次点击下一个时，它将隐藏第二个输入并显示第三个输入，依此类推。我试过直接使用 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>
最佳答案
试试这个，给你的 <div>输入容器类“input”，在 CSS 中隐藏除了第一个子项之外的所有内容。一旦你有了它，你的按钮点击处理程序就可以像这样简单:获取当前可见的 .input div，隐藏它然后显示下一个
$(function() {
$('button').on('click', function() {
var $cur = $('div.input:visible');
$cur.hide();
$cur.next().show();
});
});
关于javascript - 使用 onclick 或类似功能隐藏和显示输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39085853/