LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

JavaScript 21天入门: 练手项目之我的任务管理(七):任务标签及任务过滤

admin
2024年11月5日 9:22 本文热度 32

此系列的最后一天学习了,来把任务管理做得更完善点。

今日目标,是添加标签列,以及根据标签过滤任务。

添加标签

还记得昨天添加优先级是如何完成的吗?

这里可以先暂停阅读,自己根据昨天的实现,先自己思考一下。

这里要做的事情如下:

  • HTML:添加了一个 <input type="text"> 元素,用于输入任务标签。

  • CSS:为任务标签添加样式,使其在任务项中显示。

  • JavaScript

    • 在 addTask 函数中获取任务标签并传递给 addTaskToDOM 函数。

    • 在 addTaskToDOM 函数中,根据标签设置任务的显示。

    • 在 saveTasks 和 loadTasks 函数中,保存和加载任务时包括标签信息。

添加标签元素

在任务输入框旁边添加一个输入框,用于输入任务标签。

<input type="text" id="tag-input" placeholder="输入标签" /> 

为标签添加样式

为任务标签添加样式。

#tag-input {   width: 100px;   padding: 10px;   margin-right: 10px;   border: 1px solid #ccc;   border-radius: 4px; } 

标签存储

在添加任务时,获取标签并将其存储和显示。

 //1. 获取标签元素 const tagInput = document.getElementById('tag-input');  function loadTasks() {   const tasks = JSON.parse(localStorage.getItem('tasks')) || [];   tasks.forEach((task) => {     addTaskToDOM(task.text, task.priority, task.tag, task.completed);   }); }  function saveTasks() {   const tasks = [];   document.querySelectorAll('.task').forEach((task) => {     tasks.push({       text: task.querySelector('.task-text').textContent,       priority: task.dataset.priority,       //添加标签       tag: task.dataset.tag,       completed: task.classList.contains('completed'),     });   });   localStorage.setItem('tasks', JSON.stringify(tasks)); }  //添加新的参数taskTag用于传递标签值 function addTaskToDOM(taskText, taskPriority, taskTag, completed = false) {   const newTask = document.createElement('li');   newTask.className = `task ${taskPriority}`;   newTask.dataset.priority = taskPriority;   //添加标签   newTask.dataset.tag = taskTag;   if (completed) {     newTask.classList.add('completed');   }    const taskTextSpan = document.createElement('span');   taskTextSpan.className = 'task-text';   taskTextSpan.textContent = taskText;    //添加标签   const taskTagSpan = document.createElement('span');   taskTagSpan.className = 'task-tag';   taskTagSpan.textContent = ` [${taskTag}]`;    const completeBtn = document.createElement('button');   completeBtn.textContent = '完成';   completeBtn.className = 'complete-btn';   completeBtn.addEventListener('click', () => {     newTask.classList.toggle('completed');     saveTasks();   });    const deleteBtn = document.createElement('button');   deleteBtn.textContent = '删除';   deleteBtn.className = 'delete-btn';   deleteBtn.addEventListener('click', () => {     taskList.removeChild(newTask);     saveTasks();   });    newTask.appendChild(taskTextSpan);   //添加标签   newTask.appendChild(taskTagSpan);   newTask.appendChild(completeBtn);   newTask.appendChild(deleteBtn);   taskList.appendChild(newTask); }  

根据标签过滤

实现标签筛选功能,需要做如下事情:

  • HTML:添加了一个下拉选框,用于筛选标签。

  • CSS:为下拉选框应用和优先级一样的样式。

  • JavaScript

    • 在 loadTasks 函数中,在加载任务时把标签信息添加到过滤列表里。

    • 添加 filterTasksByTag 函数,根据输入的标签筛选任务。

添加标签过滤元素

在页面上添加一个输入框或选择框,用于输入或选择要筛选的标签。

<div class="container">   <select id="filter-select">     <option value="all">所有标签</option>   </select> </div> 

实现标签过滤功能

//获取标签过滤按钮元素并添加change事件监听 const filterSelect = document.getElementById('filter-select'); filterSelect.addEventListener('change', filterTasks);  function loadTasks() {   const tasks = JSON.parse(localStorage.getItem('tasks')) || [];   tasks.forEach((task) => {     addTaskToDOM(task.text, task.priority, task.tag, task.completed);     //把标签值添加到过滤列表里     addTagToFilter(task.tag);   }); }  function addTagToFilter(tag) {   if (     !Array.from(filterSelect.options).some((option) => option.value === tag)   ) {     const option = document.createElement('option');     option.value = tag;     option.textContent = tag;     filterSelect.appendChild(option);   } }  function filterTasks() {   const filter = filterSelect.value;   document.querySelectorAll('.task').forEach((task) => {     if (filter === 'all' || task.dataset.tag === filter) {       task.style.display = '';     } else {       task.style.display = 'none';     }   }); } 

总结

代码差异对比:

这样整个 JavaScript 入门学习的基础知识就告一段落。

在 JS 学习里,入门时强调了实践。

在实践过程中,如果有些东西不好理解,也没有关系,先知道如何使用。

实践的多了,就理解了,跟书读百遍是一个意思。

那就先这样吧。


该文章在 2024/11/5 9:22:08 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved