Javascript 使用步骤/组创建表单时出现问题

我有两个主要部分

intro info

和

current info

。我基本上希望他们做同样的事情，但在不同的时间展示。在页面加载时，首先会显示

intro info

容器，您可以查看并填写输入，然后单击“继续”。我无法理解的是如何显示

当前信息

容器，但在单击按钮后隐藏除第一个输入之外的所有输入

我正在使用

.hide（）

隐藏第一个容器

intro info

，然后使用

show（）

显示它。像这样：

$('#intro-button').click(function(){
    $('#intro-info').hide(200);
    setTimeout(function(){
        $('#current-info').show(500);
    }, 300);
});

在show行中，我尝试了，

$（'.current）

，

$（'.current:first child）

，但在我执行此操作时，没有显示任何内容，理想情况下，我希望整个容器显示以供将来添加，但只需隐藏除第一个以外的所有输入

---

。。。同样，在点击“继续”之后，一旦填写完所有输入，您将看到该部分进入视图并显示多个输入。有人看到我能做什么了吗？

您需要使用类

intro

将每个元素作为目标，并在DOM中包含该元素的第一次出现（使用

：first

）

$('#intro-button').click(function(){
    $('#intro-info').hide(); // hide intro-info div
  $("#current-info").show(); // show current-info
  $('.current').hide(); // hide all elements with class current
    setTimeout(function(){
        $('.current:first').show(200); // display once the 1st occuring element 
    }, 300);
});

---

示例：

正如我在评论中所说，我不会创建复制/粘贴意大利面代码，
相反，我会坚持一个更好的逻辑：

删除那些无用的ID和额外的类。使用如下逻辑：1。一个父元素有一个“继续”按钮-单击“显示下一个父元素”。2.每个输入都会使下一个输入出现在同一父级中

jQuery（函数（$）{//DOM现在已经准备好了
//按父母分组你的逻辑！
$（“.labelsGroup”）。每个（函数（）{
var$thatGroup=$（此）；
var$nextGroup=$thatGroup.next（“.labelsGroup”）；
var$inputs=$thatGroup.find（“输入”）；
var$procedure=$thatGroup.find（“按钮”）；
$inputs.on（“输入”，函数（）{
var$nextLabel=$（this）.closest（“标签”）.next（“标签”）；
如果（$.trim（this.value）.length>3）{
$nextLabel.has（“：input”）.addClass（“show”）；
}
});
$procedure.on（“单击”），功能（e）{
e、 preventDefault（）；//不提交（如果使用了）
var allValid=$inputs.filter（函数（）{
返回$.trim（此.value）.length>3；
}).length==$inputs.length；
//TODO:使用比上述更好的验证插件
如果（全部有效）{//最后继续！！
$thatGroup.addClass（“隐藏”）；
$nextGroup.addClass（“show”）；
//TODO:使用AJAX向服务提交表单
}否则{//或日志错误！！
返回警报（“请填写缺少的字段！”）；
}
});
});
});
.labelsGroup{
文本对齐：居中；
}
.标签组标签{
显示：块；
利润率：20px0；
}
.标签组标签输入{
背景：#fff；
填充：10px 15px；
边框：1px实心#999；
}
/*在父对象中隐藏除第一个标签以外的所有标签*/
/*隐藏所有后续标签*/
.标签组标签+标签，
.labelsGroup+.labelsGroup，
.隐藏{
不透明度：0；
可见性：隐藏；
位置：绝对位置；
}
.表演{
不透明度：1！重要；
可见性：可见！重要；
职位：相对！重要；
-webkit过渡：不透明度0.7s，易于使用；
过渡：不透明度0.7s缓和；
}

你叫什么名字？

您的电子邮件地址是什么？

继续
您有

你目前的工作是什么

继续
小心使用
此.value.trim（）！=="";它是ES5，缺少较旧的浏览器支持。使用jQuery？坚持jQuery<代码>$.trim（此.value）！="";
@RokoC.Buljan感谢您的帮助如果您想获得另一个选择器的第一个子项，可以使用
：nth-child（）
选择器。例如：
$（“ul li:nth child（2）”）.something（）
@Becky所以基本上你希望第二组的行为与第一组完全一样（一个接一个地显示“标签”），对吗？@RokoC.Buljan是的……没错。我想隐藏
简介信息
中的所有内容。问题是当前信息的显示。我只希望显示容器和第一个输入。这种方式可以工作，但是
。注意（“：first”）
不排除容器吗？它首先加载所有内容，然后将其隐藏。有不同的方法吗？那是错误的。“继续”按钮也是跳跃式的，它会促进复制/粘贴意大利面代码……我脑海中有多个版本的修复程序。没有意识到这个颠簸的版本。换了一个更好的。谢谢！这太完美了！两个简短的问题。由于我有这些单独的容器隐藏和显示，在我继续按钮到下一个容器之前验证是否更好？第二，为什么使用名字而不是id？