JavaScript开发Todo应用时任务筛选功能失效问题求助

逐行排查出的代码问题 #

• 初始化本地任务读取逻辑存在方法调用错误
  原代码读取本地存储时写为localStorage.getTasks("tasks")，但LocalStorage对象没有getTasks内置方法，正确的读取方法为getItem。这行代码运行时会直接抛出控制台报错，导致后续绑定的事件逻辑无法正常触发。
• 筛选逻辑的类操作缺少状态重置步骤
  原有筛选实现里，匹配任务时仅追加d-block类、不匹配任务时仅追加d-none类，从未移除上一次筛选操作叠加在列表项上的类。同时Bootstrap的弹性布局工具类优先级高于块级类，原有列表项自带d-flex类：
  • 仅追加d-none时，无法稳定压过原有d-flex的显示规则，导致本该隐藏的任务仍然展示
  • 多次筛选后元素身上会叠加大量冗余类，显示状态完全混乱
• 本地存储任务删除逻辑存在分支判断错误
  原代码判断本地无任务时，先将tasks赋值为空数组，紧接着又直接执行JSON.parse(localStorage.getItem("tasks"))覆盖空数组值。由于本地没有对应存储值时parse的结果为null，会导致后续任务遍历、删除操作直接中断。
• 清空任务功能存在方法名不匹配问题
  原代码中触发清空逻辑时调用的方法为clearsTasksFromLocalStorage()，但实际定义的清空本地存储方法名为clearTasksFromLocalStorage（调用时多写了一个s），触发按钮点击时会直接抛出方法不存在的报错。

筛选功能的正确实现 #

将原有filterTasks方法替换为以下代码即可正常工作，无需额外修改列表项的原有布局类：

function filterTasks(e){
    const filterKeyword = e.target.value.toLowerCase().trim();
    // 遍历所有任务列表项
    document.querySelectorAll('#task-list .list-group-item').forEach(taskItem => {
        const taskText = taskItem.firstChild.textContent.toLowerCase();
        // 匹配关键词时移除隐藏类，保持原有弹性布局显示
        if(taskText.includes(filterKeyword)) {
            taskItem.classList.remove('d-none');
        } 
        // 不匹配时追加隐藏类实现隐藏
        else {
            taskItem.classList.add('d-none');
        }
    })
}

注意：不要手动给列表项追加d-block类，列表项本身已经预置了d-flex的弹性布局，手动追加块级类反而会破坏原有布局对齐效果，仅通过d-none类控制显示隐藏即可达到预期效果。

内容的提问来源于stack exchange，提问作者Salma EL BARMAKI