练习小项目6：简单待办事项筛选器

唧唧bong_

于 2025-05-20 11:31:38 发布

阅读量363

点赞数 5

分类专栏：练习小项目文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_67992720/article/details/148083236

版权

练习小项目专栏收录该内容

9 篇文章

订阅专栏

📝 项目目标：

创建一个待办事项输入和筛选功能，可以输入多个任务，实时筛选出匹配的内容。

✅ 功能拆解

用户可添加任务到列表中
用户可以通过输入关键词进行筛选
用户点击删除按钮可以移除对应的任务
若没有匹配项，显示提示信息“没有匹配的任务”

💡 你将练习到的重点知识

input 的 input 事件（实时监听输入）
数组的 filter() 方法
DOM 动态渲染基础
小模块化思维
掌握了事件委托的基本原理和使用
理解 dataset 与类型转换在前端中的应用

HTML 部分结构（可自己定义）：

<input type="text" id="todoInput" placeholder="添加任务">
<button id="addBtn">添加</button>

<input type="text" id="filterInput" placeholder="筛选任务">

<ul id="todoList"></ul>

实践代码如下：

const todoInput = document.getElementById('todoInput')
const addBtn = document.getElementById('addBtn')
const filterInput = document.getElementById('filterInput')
const todoList = document.getElementById('todoList')

let taskList = []

renderList = (keyword = '') => {
    // 清空原有列表
    todoList.innerHTML = ''

    // 使用 filter 进行筛选（注意保留原始 taskList）
    const filterList = taskList.filter((data) => {
        return data.toLowerCase().includes(keyword.toLowerCase())
    })

    if (filterList.length === 0) {
        const li = document.createElement('li')
        li.textContent = '没有匹配的任务'
        li.style.color = 'gray'
        todoList.appendChild(li)
        return
    }

    // 遍历筛选结果，创建 <li> 并添加到 todoList 中
    filterList.forEach((element, index) => {
        const li = document.createElement('li')
        li.textContent = element
        const delBtn = document.createElement('button')
        delBtn.textContent = '❌'
        // 给每个任务绑定索引 data-index
        delBtn.setAttribute('data-index', taskList.indexOf(element))
        li.appendChild(delBtn)
        todoList.appendChild(li)
    });
}

addBtn.addEventListener('click', () => {
    // 获取输入，判断非空，添加到 taskList 中，并清空输入框
    const text = todoInput.value.trim()
    if (text) {
        taskList.push(text)
    }
    todoInput.value = ''

    // 调用 renderList 渲染当前任务列表（可传当前 filterInput.value）
    renderList(filterInput.value)

})

filterInput.addEventListener('input', () => {
    // 监听输入变化，调用 renderList 进行筛选显示
    renderList(filterInput.value)

})

// 绑定删除事件（事件委托）
todoList.addEventListener('click', (e) => {
    if (e.target.tagName === 'BUTTON') {
        const index = Number(e.target.dataset.index)
        if (index !== undefined && !isNaN(index))
            taskList.splice(index, 1)
        renderList(filterInput.value)
    }
})

页面效果展示：

❗遇到的问题和解决过程

🧩 问题1：为什么需要index !== undefined ？

if (index !== undefined) 这一句是一个防御性写法，意思是：确保我们拿到了有效的 data-index 才继续执行删除逻辑。

但你可能会问：“我们不是每个按钮都加了 data-index 吗？那什么时候会是 undefined 呢？”

什么时候可能出现 `index === undefined`？

点击的不是你渲染的删除按钮
- 比如将来你可能在 todoList 里加了别的按钮（比如“编辑”按钮），但没设置 data-index。
- 用户点了那个按钮，e.target.dataset.index 就会是 undefined。
你手滑忘了加 data-index
- 假设你在某次更新中遗漏给按钮加 data-index 属性，点这个按钮也会导致 undefined。
开发或调试时 DOM 改变了
- 有时 DOM 结构可能被意外改动，比如清空列表但按钮没移除，残留元素可能没 data-index。