实现添加选项功能
在这一步中,你将实现向应用程序中添加新投票选项的功能。
- 在
index.html
文件中,找到文件底部的 <script>
部分。
- 在
<script>
部分内,首先需要添加 itemNumber
和 renderList
,添加后的代码如下所示:
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结构。
- 在
<script>
部分中找到以下代码块:
$(
(function () {
// 初始化时,以下两条数据出现时没有删除符号
for (let index = 0; index < 2; index++) {
let initList = initRender(`Option${index + 1}`);
$(".list").append(initList);
}
// 点击加号
$(".add").click(function () {
// 待办事项:在此处完成代码
});
})()
);
- 在
$(".add").click(function () {... })
代码块内,添加以下代码:
$(".list").html("");
itemNumber++;
for (let index = 0; index < itemNumber; index++) {
let list = renderList(`Option${index + 1}`);
$(".list").append(list);
}
这段代码将清除现有的选项,递增 itemNumber
变量,然后使用 renderList
函数渲染新的选项。
有了这段代码,当用户点击“添加选项”按钮时,新的投票选项将被添加到列表中。