用JavaScript实现待办清单活跃、已完成、全部任务筛选及动效

功能需求 #

• 待办任务对象包含id、content、completed、date四个核心属性
• 点击下拉菜单选项后，按规则筛选任务：全部/未完成/已完成
• 不符合筛选条件的任务需要实现平滑淡出的交互效果

实现步骤 #

1. 新增CSS动画样式 #

在你的small.css样式文件中新增以下代码，用于实现淡出收缩动画：

/* 任务项基础过渡配置 */
#parentList li {
  transition: all 0.3s ease;
  opacity: 1;
  overflow: hidden;
}
/* 筛选隐藏类，触发淡出收缩效果 */
#parentList li.filter-hide {
  opacity: 0;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

2. 新增全局变量存储当前筛选状态 #

在JavaScript代码顶部新增全局变量，用于记录用户当前选中的筛选规则：

// 新增在所有变量声明的最前面，默认选中「全部」
let currentFilter = 'select1';

3. 替换下拉菜单点击事件逻辑 #

找到原代码中//Drop down Events对应的代码块，替换为以下逻辑：

//Drop down Events
document.getElementById("myDropdown").addEventListener('click',function(event){
    if(event.target.localName === 'span'){
        // 获取选中的选项id和文本
        const selectId = event.target.id;
        const selectText = event.target.textContent;
        // 存储当前筛选类型
        currentFilter = selectId;
        let filteredList = [];
        // 按选中规则过滤任务列表
        switch(selectId) {
            case 'select1': 
                filteredList = [...toDoList];
                break;
            case 'select2': 
                filteredList = toDoList.filter(item => !item.completed);
                break;
            case 'select3': 
                filteredList = toDoList.filter(item => item.completed);
                break;
        }
        // 给不符合条件的任务加隐藏类，触发淡出动画
        const allTaskEls = document.querySelectorAll('#parentList li');
        allTaskEls.forEach(el => {
            const taskId = Number(el.id);
            const isMatched = filteredList.some(task => task.id === taskId);
            isMatched ? el.classList.remove('filter-hide') : el.classList.add('filter-hide');
        })
        // 动画结束后更新渲染列表，同步修改按钮显示文本
        setTimeout(() => {
            renderTodos(filteredList);
            document.querySelector('.dropbtn').firstChild.textContent = selectText + ' ';
        }, 300)
    }
});

4. 优化本地存储更新逻辑 #

修改原addToLocalStorage函数，保证新增/删除/切换任务状态时，适配当前的筛选规则：

function addToLocalStorage(toDoList){
    localStorage.setItem('toDoList',JSON.stringify(toDoList));
    // 按当前筛选规则过滤后再渲染
    let filteredList = [];
    switch(currentFilter) {
        case 'select1': 
            filteredList = [...toDoList];
            break;
        case 'select2': 
            filteredList = toDoList.filter(item => !item.completed);
            break;
        case 'select3': 
            filteredList = toDoList.filter(item => item.completed);
            break;
    }
    renderTodos(filteredList);
}

效果说明 #

• 筛选切换时不符合条件的任务会在300ms内完成透明渐变、高度收缩的淡出效果，过渡自然
• 操作任务（新增/删除/切换完成状态）后会自动保持当前筛选规则展示对应内容，无需重复选择
• 顶部下拉按钮文字会同步显示当前筛选类型，降低用户理解成本

内容的提问来源于stack exchange，提问作者Carlos Alonzo