104 lines
2.7 KiB
JavaScript
104 lines
2.7 KiB
JavaScript
const lessons = [
|
||
{ title: "获取元素", done: false },
|
||
{ title: "修改 DOM", done: true },
|
||
];
|
||
|
||
function fakeLoadExtraLessons() {
|
||
return new Promise(function (resolve) {
|
||
setTimeout(function () {
|
||
resolve([
|
||
{ title: "事件委托", done: false },
|
||
{ title: "异步渲染", done: false },
|
||
]);
|
||
}, 900);
|
||
});
|
||
}
|
||
|
||
// 任务：
|
||
// 1. 获取页面里的关键元素
|
||
// 2. 写一个 renderLessons 函数，把 lessons 渲染到列表
|
||
// 3. 点击列表项时切换 done 状态
|
||
// 4. 提交表单时阻止默认提交，并新增课程
|
||
// 5. 点击加载按钮时显示加载状态，并把异步返回的课程追加到列表
|
||
/* 一个课程列表区域
|
||
- 一个表单区域
|
||
- 一个添加课程的交互
|
||
- 一个点击课程切换完成状态的交互
|
||
- 一个异步加载提示或远程数据模拟
|
||
- 清晰的状态文案更新*/
|
||
const page = document.querySelector(".page")
|
||
const hero = document.querySelector("hero")
|
||
const text = document.getElementById("status-text")
|
||
const panel = document.querySelector(".panel")
|
||
const btn = document.getElementById("load-btn")
|
||
const list = document.getElementById("lesson-list")
|
||
const formPanel = document.querySelector(".form-panel")
|
||
const lessonForm = document.getElementById("lesson-form")
|
||
const lessonInput = document.getElementById("lesson-input")
|
||
|
||
function renderLessons() {
|
||
lessons.forEach(item => {
|
||
const li = document.createElement("li")
|
||
li.classList.add("li")
|
||
li.setAttribute("title", item.title)
|
||
li.setAttribute("done", item.done)
|
||
li.textContent = `
|
||
标题：${item.title}
|
||
状态：${item.done}`
|
||
|
||
list.appendChild(li)
|
||
})
|
||
}
|
||
renderLessons()
|
||
|
||
//event.target,closest,
|
||
list.addEventListener("click", function (event) {
|
||
const a = event.target.closest(".li")
|
||
if (a) {
|
||
a.textContent = `
|
||
标题：${a.title}
|
||
状态：${!a.done}`
|
||
|
||
a.done = !a.done
|
||
}
|
||
})
|
||
|
||
lessonForm.addEventListener("submit", function (event) {
|
||
event.preventDefault()
|
||
const c = document.createElement("li")
|
||
const d = lessonInput.value.trim()
|
||
c.textContent = `
|
||
标题：${d}
|
||
状态：true`
|
||
c.setAttribute("title", d)
|
||
c.setAttribute("done", true)
|
||
c.classList.add("li")
|
||
lessonInput.value = ""
|
||
list.appendChild(c)
|
||
})
|
||
|
||
async function load() {
|
||
text.textContent = "加载中"
|
||
text.innerHTML = ""
|
||
try {
|
||
|
||
const s = await fakeLoadExtraLessons()
|
||
text.textContent = "加载完成"
|
||
s.forEach(item => {
|
||
const li = document.createElement("li")
|
||
li.classList.add("li")
|
||
li.setAttribute("title", item.title)
|
||
li.setAttribute("done", item.done)
|
||
li.textContent = `
|
||
标题：${item.title}
|
||
状态：${item.done}`
|
||
|
||
list.appendChild(li)
|
||
})
|
||
} catch (error) {
|
||
text.textContent = "加载失败"
|
||
|
||
}
|
||
}
|
||
|
||
btn.addEventListener("click", load) |