构建一个投票应用程序

JavaScriptJavaScriptIntermediate
立即练习

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

简介

在这个项目中,你将学习如何构建一个投票应用程序,该应用程序允许用户创建和管理投票选项,并在需要时删除选项。该应用程序还包括多选支持和公开投票结果的功能。

👀 预览

投票应用演示动图

🎯 任务

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

  • 如何为投票应用程序初始化HTML结构
  • 如何实现添加新投票选项的功能
  • 如何实现删除投票选项的功能
  • 如何测试应用程序以确保功能按预期工作

🏆 成果

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

  • 为投票应用程序设置基本的HTML结构
  • 使用JavaScript动态地向应用程序中添加和删除投票选项
  • 处理用户交互,如点击“添加选项”按钮和删除图标
  • 测试应用程序以确保它满足要求
  • 使用HTML、CSS和JavaScript构建交互式Web应用程序

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") 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/functions -.-> lab-445674{{"`构建一个投票应用程序`"}} javascript/dom_select -.-> lab-445674{{"`构建一个投票应用程序`"}} javascript/dom_manip -.-> lab-445674{{"`构建一个投票应用程序`"}} javascript/event_handle -.-> lab-445674{{"`构建一个投票应用程序`"}} javascript/dom_traverse -.-> lab-445674{{"`构建一个投票应用程序`"}} end

设置项目结构

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

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

├── css
|   ├── style.css
|   └── bootstrap.min.css
├── images
|   ├── x.svg
|   └── plus-square.svg
├── js
│   └── jquery.min.js
└── index.html

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

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

未完成的项目结构

实现添加选项功能

在这一步中,你将实现向应用程序中添加新投票选项的功能。

  1. index.html 文件中,找到文件底部的 <script> 部分。
  2. <script> 部分内,首先需要添加 itemNumberrenderList,添加后的代码如下所示:
let itemNumber = 2; // 默认2条数据
let initRender = (txt) => {
  return `<div class="mb-3 row">
          <label class="col-sm-2 col-form-label txt">${txt}</label>
          <div class="col-sm-9">
              <input type="text" class="form-control">
         </div>
      </div>`;
};
// 为大于默认数量的数据渲染带删除按钮(x)的HTML
let renderList = (txt) => {
  return `<div class="mb-3 row item">
          <label class="col-sm-2 col-form-label txt">${txt}</label>
          <div class="col-sm-9">
              <input type="text" class="form-control">
          </div>
          <div class="col-sm-1">
              <img class="del-icon" src="./images/x.svg" alt="">
          </div>
      </div> `;
};

这些函数用于生成投票选项的HTML结构。

  1. <script> 部分中找到以下代码块:
$(
  (function () {
    // 初始化时,以下两条数据出现时没有删除符号
    for (let index = 0; index < 2; index++) {
      let initList = initRender(`Option${index + 1}`);
      $(".list").append(initList);
    }

    // 点击加号
    $(".add").click(function () {
      // 待办事项:在此处完成代码
    });
  })()
);
  1. $(".add").click(function () {... }) 代码块内,添加以下代码:
$(".list").html("");
itemNumber++;
for (let index = 0; index < itemNumber; index++) {
  let list = renderList(`Option${index + 1}`);
  $(".list").append(list);
}

这段代码将清除现有的选项,递增 itemNumber 变量,然后使用 renderList 函数渲染新的选项。

有了这段代码,当用户点击“添加选项”按钮时,新的投票选项将被添加到列表中。

实现删除功能

在这一步中,你将实现从应用程序中删除投票选项的功能。

  1. index.html 文件的 <script> 部分中,找到以下代码块:
// 点击x删除按钮,如果列表中的项目少于2个,则删除图标将不会显示
$(document).on("click", ".del-icon", function () {
  // 待办事项:在此处完成代码
});
  1. 在这个代码块内,添加以下代码:
$(".list").html("");
itemNumber--;
if (itemNumber <= 2) {
  for (let index = 0; index < itemNumber; index++) {
    let list = initRender(`Option${index + 1}`);
    $(".list").append(list);
  }
} else {
  for (let index = 0; index < itemNumber; index++) {
    let list = renderList(`Option${index + 1}`);
    $(".list").append(list);
  }
}

这段代码将清除现有的选项,递减 itemNumber 变量,然后根据选项数量使用适当的函数(initRenderrenderList)渲染剩余的选项。

有了这段代码,当用户点击投票选项旁边的“x”图标时,该选项将从列表中删除。

测试应用程序

  1. 保存 index.html 文件,并在浏览器中刷新 index.html 页面。
  2. 确认最初的两个投票选项显示时没有删除图标。
  3. 点击“添加选项”按钮,观察新的投票选项是否被添加到列表中,并且显示删除图标。
  4. 点击其中一个投票选项旁边的删除图标,确认该选项是否从列表中移除。
  5. 通过添加和删除投票选项继续测试应用程序,以确保功能按预期工作。

最终结果如下:

投票应用最终结果

恭喜!你已完成投票应用程序的实现。

✨ 查看解决方案并练习

总结

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

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