带进度条的分步表单

介绍

在这个项目中，你将学习如何使用 jQuery 实现一个带有进度条的分步表单。这个项目旨在帮助你理解创建一个动态且交互式表单的过程，该表单能让用户轻松浏览不同步骤。

👀 预览

分步表单演示

🎯 任务

在这个项目中，你将学习：

如何实现“下一步”按钮的功能，以切换到表单的下一步。
如何实现“上一步”按钮的功能，以切换到表单的上一步。
如何实现“提交”按钮的功能，以显示成功消息。
如何更新进度条以反映表单的当前步骤。

🏆 成果

完成这个项目后，你将能够：

使用 jQuery 操作 DOM 并处理用户交互。
使用 display 属性控制表单字段的显示。
更新进度条以反映表单的当前步骤。
创建一个界面简洁直观的分步表单。

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── css
│   └── style.css
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

其中：

css/style.css 是样式文件。
js/index.js 是用于实现分步表单切换的 JavaScript 文件。
js/jquery-3.6.0.min.js 是 jQuery 文件。
index.html 是主页。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。

实现下一页按钮

在这一步中，你将学习如何在表单的第一步中实现“下一步”按钮的功能。

打开 js/index.js 文件。
找到 $(".next").click 代码并添加以下代码：

// 点击“下一步”按钮
$(".next").click(function () {
  current_form = $(this).parent();
  next_form = current_form.next();
  // 控制显示下一个表单并隐藏其他表单
  next_form.show().siblings("fieldset").hide();
  const index = next_form.index() - 1;
  $("#progressbar li").eq(index).addClass("active");
});

这段代码负责处理“下一步”按钮的点击事件。下面来详细分析它的作用：
- $(".next").click(function () {... })：这为所有具有“next”类的元素设置了一个点击事件处理程序。
- current_form = $(this).parent();：这获取了当前的表单字段（即包含被点击的“下一步”按钮的那个表单字段）。
- next_form = current_form.next();：这获取了下一个表单字段（即点击“下一步”按钮后应显示的那个表单字段）。
- next_form.show().siblings("fieldset").hide();：这显示下一个表单字段并隐藏所有其他表单字段（下一个表单字段的兄弟表单字段）。
- const index = next_form.index() - 1;：这计算下一个表单字段的索引，该索引将用于更新进度条。
- $("#progressbar li").eq(index).addClass("active");：这将“active”类添加到相应的进度条项目中，表明用户已进入下一步。

实现上一步按钮

在这一步中，你将学习如何在表单的第二步中实现“上一步”按钮的功能。

在 js/index.js 文件中，找到 $(".previous").click 代码并添加以下代码：

// 点击返回按钮
$(".previous").click(function () {
  current_form = $(this).parent();
  previous_form = current_form.prev();
  previous_form.show().siblings("fieldset").hide();
  const index = previous_form.index() - 1;
  $("#progressbar li")
    .eq(index)
    .addClass("active")
    .next()
    .removeClass("active");
});

这段代码负责处理“上一步”按钮的点击事件。下面来详细分析它的作用：
- $(".previous").click(function () {... })：这为所有具有“previous”类的元素设置了一个点击事件处理程序。
- current_form = $(this).parent();：这获取了当前的表单字段（即包含被点击的“上一步”按钮的那个表单字段）。
- previous_form = current_form.prev();：这获取了上一个表单字段（即点击“上一步”按钮后应显示的那个表单字段）。
- previous_form.show().siblings("fieldset").hide();：这显示上一个表单字段并隐藏所有其他表单字段（上一个表单字段的兄弟表单字段）。
- const index = previous_form.index() - 1;：这计算上一个表单字段的索引，该索引将用于更新进度条。
- $("#progressbar li").eq(index).addClass("active").next().removeClass("active");：这将“active”类添加到相应的进度条项目中，表明用户已回到上一步，并从下一个进度条项目中移除“active”类。

实现提交按钮

在这一步中，你将学习如何在表单的第三步中实现“提交”按钮的功能。

在 js/index.js 文件中，找到 $(".submit").click 代码并添加以下代码：

// 点击提交按钮
$(".submit").click(function () {
  alert("提交成功！");
});

这段代码负责处理“提交”按钮的点击事件。下面来详细分析它的作用：
- $(".submit").click(function () {... })：这为所有具有“submit”类的元素设置了一个点击事件处理程序。
- alert("提交成功！");：这向用户显示一条警告消息，表明表单已成功提交。

完成这四个步骤后，分步表单的功能应该就完全实现了。你可以通过点击“下一步”、“上一步”和“提交”按钮来测试表单，以确保表单切换和进度条更新按预期工作。最终的页面效果如下：

图片描述