地址管理Web应用程序

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何在一个Web应用程序中创建新地址并管理地址。该项目涉及实现省-市级联下拉菜单、表单验证、标签样式设置以及新地址的渲染。

👀 预览

地址表单演示动图

🎯 任务

在这个项目中,你将学习:

  • 如何使用 data.js 文件中的数据初始化省份下拉菜单
  • 如何实现省-市级联下拉菜单功能
  • 如何为标签列表中的标签添加点击事件,使选中的标签被激活而其他标签被停用
  • 如何在保存新地址之前验证地址、联系人及电话号码字段
  • 如何创建并将新地址列表项追加到地址列表中

🏆 成果

完成这个项目后,你将能够:

  • 使用JavaScript操作DOM
  • 处理用户交互和事件
  • 实现表单验证和数据处理
  • 动态创建并追加HTML元素

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("`DOM Traversal`") subgraph Lab Skills javascript/dom_select -.-> lab-299853{{"`地址管理Web应用程序`"}} javascript/dom_manip -.-> lab-299853{{"`地址管理Web应用程序`"}} javascript/event_handle -.-> lab-299853{{"`地址管理Web应用程序`"}} javascript/dom_traverse -.-> lab-299853{{"`地址管理Web应用程序`"}} end

设置项目结构

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

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

├── index.html
├── css
├── images
└── js
    ├── data.js
    └── index.js

其中:

  • index.html 是主页。
  • css 是样式文件的文件夹。
  • images 是图像文件夹。
  • js/data.js 是省市的数据。
  • js/index.js 是需要完成的JavaScript文件。

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

接下来,在VM顶部打开“Web 8080”并手动刷新以查看页面。

实现省-市级联下拉菜单

在这一步中,你将学习如何实现省-市级联下拉菜单功能。

  1. js/index.js 文件中找到 provincechange() 函数。
  2. 此函数负责在选择一个省份时更新城市下拉菜单。
  3. 首先,它使用 document.getElementById("param_province") 获取对所选省份下拉菜单元素的引用。
  4. 然后,它使用 document.getElementById("param_city") 获取对城市下拉菜单元素的引用。
  5. 接下来,它使用 selectedProvince.value 从省份下拉菜单中获取所选省份的索引。
  6. 然后,它使用所选省份的索引从 data.js 文件中的 towns 数组访问相应的城市。
  7. 最后,它将城市下拉菜单选项的长度设置为城市的数量,并循环遍历这些城市以设置每个下拉菜单选项的文本和值。
// 实现省-市级联下拉菜单。
function provincechange() {
  var selectedProvince = document.getElementById("param_province");
  var city = document.getElementById("param_city");
  var { value } = selectedProvince;
  var cities = towns[value];
  city.length = cities.length;
  for (var i = 0; i < cities.length; i++) {
    city.options[i].text = cities[i];
    city.options[i].value = i;
  }
}

为标签添加点击事件

在这一步中,你将学习如何为标签列表中的标签添加点击事件,该事件将激活所选标签的样式并停用其他标签。

  1. js/index.js 文件中找到 addClick() 函数。
  2. 此函数负责为标签添加点击事件。
  3. 首先,它使用 document.querySelectorAll(".mark a") 获取对所有标签元素的引用。
  4. 然后,它获取对 param_mark 输入字段的引用,该字段将存储所选标签的索引。
  5. 接下来,它循环遍历标签元素并为每个元素添加一个点击事件监听器。
  6. 在事件监听器内部,它首先使用 labels.forEach((l) => l.classList.remove("active")) 从所有标签中移除 active 类。
  7. 然后,它使用 label.classList.add("active") 为被点击的标签添加 active 类。
  8. 最后,它将 param_mark 输入字段的值设置为被点击标签的索引。
function addClick() {
  var labels = document.querySelectorAll(".mark a");
  var input = document.getElementById("param_mark");

  labels.forEach((label, index) => {
    label.addEventListener("click", () => {
      labels.forEach((l) => l.classList.remove("active"));
      label.classList.add("active");
      input.value = index;
    });
  });
}

验证并保存地址信息

在这一步中,你将学习如何验证地址信息并将新地址保存到地址列表中。

  1. js/index.js 文件中找到 saveInfo() 函数。
  2. 此函数负责验证输入字段并保存新地址。
  3. 首先,它获取省份、城市、地址、标签、姓名和电话号码输入字段的值。
  4. 然后检查省份、地址、姓名或电话号码字段是否为空。如果这些必填字段中的任何一个为空,它将显示一个警告对话框。
  5. 如果所有必填字段都已填写,它将创建一个新的列表项元素 (<li>) 并用地址信息填充它。
  6. 新的地址列表项包括标签(基于所选标签)、完整地址(省份和城市)、地址以及姓名和电话号码。
  7. 最后,它将新的地址列表项追加到 .address-list 元素,并调用 back() 函数重定向到地址管理页面。
function saveInfo() {
  var { value: provinceIdx, options: provinces } =
    document.getElementById("param_province");
  var { value: cityIdx, options: cities } =
    document.getElementById("param_city");
  var { value: address } = document.getElementById("param_address");
  var { value: markId } = document.getElementById("param_mark");
  var labelNodes = document.querySelectorAll(".mark a");
  var label = labelNodes[markId].text;
  var { value: name } = document.getElementById("param_name");
  var { value: phone } = document.getElementById("param_phone");

  if (provinceIdx === 0 || !address || !name || !phone) {
    document.querySelector(".warning-dialog").style.display = "block";
    return;
  }

  var addressListElement = document.querySelector(".address-list");
  var newAddressElement = document.createElement("li");
  newAddressElement.innerHTML = `
    <div class="show-area">
      <label class="school">${label}</label>
      <span>${provinces[provinceIdx].text}${cities[cityIdx].text}</span>
    </div>
    <div class="show-address">
      <span>${address}</span>
      <a><img src="./images/edit.png" /></a>
    </div>
    <div class="show-info">
      <span>${name}</span>
      <span>${phone}</span>
    </div>
  `;
  addressListElement.appendChild(newAddressElement);
  back();
}

通过执行这些步骤,你已在项目中成功实现了“添加新地址”功能。恭喜!

最终页面效果应如下所示:

图片描述
✨ 查看解决方案并练习

总结

恭喜!你已完成此项目。你可以在LabEx中练习更多实验以提升技能。

您可能感兴趣的其他 JavaScript 教程