今日文章目录

• 需求说明
• 事前准备
• 参考资料

需求说明

Q: 有哪些需求？

1. 纪录分类：全部、已完成、未完成
2. 显示方式：做页签切换
3. 显示 已完成、未完成 数量

事前准备

• 待办表单：

    <form action="submit" id="toDoForm">
      <input id="inputValue" placeholder="请输入待办事项..."/>
      <button type="submit" class="addBtn">ADD TO LIST</button>
    </form>

• 页签内容准备好三个ul : 全部、完成、未完成

<div class="contentGroup">
  <div class="content content1">
    <div class="detail">
        <h2 class="subTitle">待完成任务：0，已完成任务：0</h2>
        <ol class="toDoList">

        </ol>
    </div>
  </div>
  <div class="content content2">
    <div class="detail">
      <h2 class="subTitle">待完成任务：0</h2>
      <ol class="unfinishToDoList">

      </ol>
    </div>
  </div>
  <div class="content content3">
    <div class="detail">
      <h2 class="subTitle">已完成任务：0</h2>
      <ol class="finishedToDoList">

      </ol>
    </div>
  </div>
</div>

重点说明

• submit : submit 监听事件会在form element送出时触发。单纯使用input或button无效。

• submit的默认行动是传送表单内容至服务器。以目前练习项目来说不需要，故在执行新增前，需停止默认行动

      event.preventDefault(); // 停止默认行动，但不会影响事件的传递。
  

• cloneNode(boolean) : 复制节点，预设boolean为false，进行浅拷贝(第一层);当boolean为true，进行深拷贝(所有子层)。
  

• innerHTML : 替换指定节点内容，原本节点内的内容不会保留，会整个被覆盖。(如果要保留原本内容，可以使用insertAdjacentHTML(position, text)

• textContent : 替换指定text node内容，原本text node内的内容不会保留，会整个被覆盖。

• previousElementSibling : 选取指定节点的前一个同层节点。

• hasChildNodes() : 回传布林值。指定节点内，是否有子节点。

• 目前 codepen 练习：https://codepen.io/chen-chens/pen/NWgjVez?editors=0010

• 显示效果：
  

遇到的问题

1. 遇到问题1(已解决) :
   当我同时将新增的li分别append到 全部分类ul 与 未完成分类ul 时，只有最後一个append有效果。

• 推测原因 :
  因为我只有新增一个li，所以只能带入一个ul，不能同时给多个ul。
  
  
• 解决方法 : 将新增li的动作另外包成function，并在个别ulappend时呼叫function。
  (每一次呼叫都是建立新li)

2. 遇到问题2(待解决) :
   未完成、已完成清单，在重复点击deleteBtn後，要如何更新三个清单的内容？

• 目前写法是：
  1. 先拿到全部的资料
  2. 依全部资料筛选 未完成、已完成资料
  3. 将筛选资料append到对应清单
  4. 新deleteBtn加入监听
  5. 在监听的执行动作加入 步骤2.更新筛选资料 (好像哪里怪的...？)
• 解决方法 : 还没想到

参考资料

• https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLFormElement/submit_event
• https://developer.mozilla.org/zh-TW/docs/Web/API/Event/preventDefault
• https://developer.mozilla.org/zh-CN/docs/Web/API/Node/hasChildNodes
• https://stackoverflow.com/questions/40550370/append-on-all-divs-with-same-class

明日预告：