使用javascript或jquery创建多页表单的幻觉

我不熟悉php和java脚本（一周），我正在尝试用一个简单紧凑的脚本创建一个多页面表单。第二个页面将执行所有验证和安全检查，看起来像一个确认页面，将显示所有错误。但是我无法让按钮在字段集中移动。
我做错了什么？
以下是一个示例站点：

var区间=未定义；
$（文档）.ready（函数（）{
$（'#next'）。在（'click'，getNext'）；
$（'prev'）。在（'click'，getPrev'）；
});
函数getNext（）{
var$curr=$（'fieldset:visible'），
$next=（$curr.next（）.length）？$curr.next（）：$（'fieldset'）.first（）；
过渡（$curr，$next）；
}
函数getPrev（）{
var$curr=$（'fieldset:visible'），
$next=（$curr.prev（）.length）？$curr.prev（）：$（'fieldset'）.last（）；
过渡（$curr，$next）；
}
功能转换（$curr，$next）{
间隔时间；
$next.css（'z-index'，2）.fadeIn（'fast'，function（））{
$curr.hide（）.css（'z-index'，0）；
$next.css（'z-index'，1）；
});
}

/*表单样式*/
#自动的{
显示：表格；/*生成div填充内容*/
宽度：345px；
高度：自动；
位置：相对位置；
边框：1px纯红色；/*确保div填充内容的视觉辅助*/
}
#自动字段集{
宽度：345px；
边框：1px纯红色；/*确保div填充内容的视觉辅助*/
}
#迈尔斯{
display:none；/*spamer填写此内容，它将被我的邮件脚本拒绝*/
}
/*隐藏除第一个字段集以外的所有字段集*/
#自动字段集：非（：类型的第一个）{
显示：无；/*删除以查看所有FeildSet*/
}
.行动按钮{
}
}

目标
一,。通过单击“下一步”和“上一步”按钮可以切换“字段集”，而不会看到转换；（否）

2.让div在不指定高度的情况下填充内容，因为一些按钮将展开以显示更多选项；（我想）

3.在第一次单击下一个和上一个按钮后，不要取消该按钮；（未知）

第1页幻觉

第2页幻觉
第2页幻觉

第3页幻觉
第3页幻觉

第4页幻觉
第4页幻觉
第4页幻觉
第4页幻觉

第5页错觉
第5页错觉
第5页错觉
第5页错觉
第5页错觉

第6页幻觉
第6页幻觉
第6页幻觉
第6页幻觉
第6页幻觉
第6页幻觉

对于单击事件，您需要使用类选择器，如

.next

而不是id选择器

\next

。我已将您的代码更新为以下内容：

$(document).ready(function () {
    $('.next').on('click', getNext);
    $('.previous').on('click', getPrev);
});

您还使用了错误的“previous”选择器，我将其从

#prev

更新为

.previous

---

和更新的fiddle:

首先，不能对多个html元素使用相同的

id

属性。如果你想对多个元素使用同一个类，你可以使用

class

而不是

id

。提琴可以工作，但每当我在编辑器中复制粘贴它时，它就不工作了。你能用更新的编辑器代码更新你的提琴并将链接传递给我，让我看看你更新的编辑器代码吗继续使其从一个div切换到下一个div而不看到转换？您可以将

transition（）

函数更新为执行

$curr.hide（）

和

$next.show（）而不是使用
fadeIn（）
。更新小提琴：