新手学习JavaScript：day29 - Todolist(2)

嗨！大家好，昨天我们做了新增以及划掉的功能，今天让我们来完成删除跟切换标签，最後让完成的任务进入到完成区域。

删除

1. 其实删除跟昨天打勾确认的功能一样是监听任务区域是不是有被点击，点击的对象如果是删除的按钮就把这个任务删除。所以只要在昨天的监听事件加上判断就行了。

addTodoElement().todoListArea.addEventListener("click",(e)=>{

    // 判断点击的对象是不是删除，是的话就将任务删除。
  if(e.target.classList[1] === "fa-trash-alt"){
    e.target.parentNode.parentNode.remove()
  }
  
  
  if(e.target.classList[0] === "check" && e.target.checked){
    e.target.parentNode.style.textDecoration = "line-through black"
  }

  if(e.target.classList[0] === "check" && !e.target.checked){
    e.target.parentNode.style.textDecoration = "none"
  }
})

切换标签

1. 首先我们要先抓到标签和完成区域的DOM元素，所以在我们的addTodoElement()中新增属性。

let addTodoElement = () => {
  let todoForm = document.querySelector(".todo-form")
  let todoInput = document.querySelector(".todo-form input[type='text']")
  let todoListArea = document.querySelector(".todo-list")
  let listTemplate = document.querySelector("template")
  let finishedArea =document.querySelector(".finished-list")
  let tab = document.querySelector(".tab")
  let working = document.querySelector(".working")
  let finished = document.querySelector(".finished")
  element = {
    todoForm,
    todoInput,
    todoListArea,
    listTemplate,
    finishedArea,
    tab,
    working,
    finished,
  }
  return element
}

2. 监听标签区域，看是点击到哪一个标签，将点击的标签以及相对应的区域加上"active"这个class，另一个就拔掉"active"这个class。

addTodoElement().tab.addEventListener("click",(e)=>{
  switch (e.target.classList[0]) {
    case "working":
      e.target.classList.add("active")
      addTodoElement().finished.classList.remove("active")
      addTodoElement().todoListArea.classList.add("active")
      addTodoElement().finishedArea.classList.remove("active")
      break;
    case "finished":
      e.target.classList.add("active")
      addTodoElement().working.classList.remove("active")
      addTodoElement().todoListArea.classList.remove("active")
      addTodoElement().finishedArea.classList.add("active")
      break;
  }
})

将完成的任务送进完成区域

1. 在DOM中取得完成按钮

let addTodoElement = () => {
  let todoForm = document.querySelector(".todo-form")
  let todoInput = document.querySelector(".todo-form input[type='text']")
  let todoListArea = document.querySelector(".todo-list")
  let listTemplate = document.querySelector("template")
  let finishedArea =document.querySelector(".finished-list")
  let tab = document.querySelector(".tab")
  let working = document.querySelector(".working")
  let finished = document.querySelector(".finished")
  let finishedButton = document.querySelector(".finished-button")
  element = {
    todoForm,
    todoInput,
    todoListArea,
    listTemplate,
    finishedArea,
    tab,
    working,
    finished,
    finishedButton
  }
  return element
}

2. 监听按钮，当点击按钮时，选取所有任务，然後筛选出有被划掉的任务，最後将筛选出的任务填入完成区域，并且在任务区域删除这些任务。

addTodoElement().finishedButton.addEventListener("click",()=>{
  let tasks = Array.from(document.querySelectorAll(".task .check"))
  //筛选出被划掉的任务
  let checkedTasks = tasks.filter((task)=>{return task.checked})
  
  checkedTasks.forEach((task)=>{
    let clone = document.importNode(task.parentNode,true)
//将筛选任务填入完成区   
 addTodoElement().finishedArea.appendChild(clone)
    task.parentNode.remove() //在任务区删除这些被划掉的任务
  })

以上就是基本的删除、切换标签以及将任务填入完成区的功能。那如果有仔细看或是跟着做的朋友就会发现，一开始两个区域有「目前没有新的任务」以及「尚未有任务完成」，这两个区域都没有做处理。那这问题就留给明天，我们明天见！