宝贵的一票

介绍

公司经常举办各种活动，但一到投票环节就犯了难，于是公司决定安排小蓝开发一个投票系统，更好的收集大家的投票信息。为了赶在下一次活动开始前上线，小蓝正在马不停蹄的赶工中，请你也来帮助小蓝完成部分功能吧。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
5
├── css
├── images
├── js
│   └── jquery.min.js
└── index.html

其中：

  • index.html 是主页面。
  • images 是存放图片的文件夹。
  • css 是存放样式文件的文件夹。
  • js/jquery.min.js 是 jQuery 文件。

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

图片描述

目标

完成 index.html 文件中的 TODO 部分。

  1. 点击添加选项，页面中新增一个选项。选项前文字按照：选项 1，选项 2，选项 3 …… 顺序排列，当页面中的选项大于 2 个时，选项后面跟随删除按钮（即 x 图标）。带有删除图标的选项 DOM 结构如下：
1
2
3
4
5
6
7
8
9
10
<div class="mb-3 row item">
  <label class="col-sm-2 col-form-label txt">选项1</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>
  1. 点击删除按钮，删除当前选项，并且选项前文字按照：选项 1，选项 2，选项 3 …… 顺序排列，当选项数量小于等于 2 个时，选项后面无删除按钮。

完成后，最终页面效果如下：

图片描述

规定

  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
  • 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 1096 | 总提交次数: 1282 | 通过率: 85.5%

难度: 中等 标签: 2022, 省模拟赛, Web 前端, jQuery

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>宝贵的一票</title>
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div class="inner-container shadow">
      <div class="mb-3 row">
        <label class="col-sm-2 col-form-label">投票主题</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" />
        </div>
      </div>
      <div class="list"></div>
      <div class="add">
        <div class="addtxt">
          <img src="./images/plus-square.svg" alt="加号图标" />
          添加选项
        </div>
      </div>
      <div class="form-check checkbox-one">
        <input class="form-check-input" type="checkbox" value="" />
        <label class="form-check-label" for="flexCheckDefault">
          支持多选
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" />
        <label class="form-check-label" for="flexCheckDefault">
          公开投票结果
        </label>
      </div>

      <div class="row bottom">
        <div class="col">
          <a class="historytxt" href="javascript:void(0)">历史投票</a>
        </div>
        <div class="col"></div>
        <div class="col">
          <button type="button" class="btn btn-light">取消</button>
          <button type="button" class="btn btn-primary">发起投票</button>
        </div>
      </div>
    </div>

    <script>
      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>`;
      };
      $(
        (function () {
          // 初始化的时候渲染两条数据，且不带删除符号
          for (let index = 0; index < 2; index++) {
            let initList = initRender(`选项${index + 1}`);
            $(".list").append(initList);
          }

          // 点击加号逻辑
          $(".add").click(function () {
            // TODO 待补充代码
            $(".list").append(`
            <div class="mb-3 row item">
              <label class="col-sm-2 col-form-label txt">选项${document.getElementsByClassName('list')[0].childElementCount + 1}</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>`)
            if (document.getElementsByClassName('list')[0].childElementCount > 2) {
              Array.from(document.getElementsByClassName('list')[0].children).forEach((item,index) => {
                if (index <= 1 && item.childElementCount < 3) {
                  const node = document.createElement('div')
                  node.classList.add('col-sm-1')
                  node.innerHTML = `<img class="del-icon" src="./images/x.svg" alt="" />`
                  item.appendChild(node)
                }
              })
            }
          });
          // 点击 x 删除逻辑，列表小于 2 项时不显示删除图标
          $(document).on("click", ".del-icon", function (e) {
            // TODO 待补充代码
            const container = e.target.parentNode.parentNode.parentNode
            console.log(e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode));
            if (container.childElementCount <= 2) {
              Array.from(container.children).forEach((item,index) => {
                Array.from(item.children).forEach(child => {
                  if (child.classList.contains('col-sm-1')) {
                    item.removeChild(child)
                  }
                })
              })
            }
            Array.from(container.children).forEach((item, index) => {
              item.children[0].innerHTML = `选项${index + 1}`
            })

          });
        })()
      );
    </script>
  </body>
</html>