黑马TOdolist案例（最新版）

---

$(function () {
  // 0. 本地获取数据
  const data = JSON.parse(localStorage.getItem('todolist') || '[]')
  
  // 基本写法
  // let data = []
  // if (localStorage.getItem('todolist')) {
  //   data = JSON.parse(localStorage.getItem('todolist'))
  // }
  // 三元写法
  // let data = localStorage.getItem('todolist') ? JSON.parse(localStorage.getItem('todolist')) : []

  // 1. 渲染列表
  function render() {
    // data数据改变, 进行本地储存
    localStorage.setItem('todolist', JSON.stringify(data))
    // 清空列表内容
    $('#todolist, #donelist').empty()
    // 遍历data数据
    $.each(data, function (i, item) {
      // item 数组中的每一个元素 // { title: 1, done: false }
      // 动态生成li标签
      const li = $(`<li><input type="checkbox"> <p>${item.title}</p> <a href="javascript:;" data-index=${i}></a></li>`)
      // 根据done状态, 添加到不同列表中
      if (item.done) {
        // input改变checked属性
        li.children('input').prop('checked', true)
        // 添加到已经完成的列表中
        $('#donelist').prepend(li)
      } else {
        // 添加到正在进行的列表中
        $('#todolist').prepend(li)
      }
    })
    // 两个列表的长度
    $('#todocount').text($('#todolist li').length)
    $('#donecount').text($('#donelist li').length)
  }
  render()

  // 2. 添加todo
  $('#title').keyup(function (e) {
    // 判断按下的是回车键
    if (e.key === 'Enter') {
      // 获取表单值
      const title = $(this).val().trim()
      // 非空校验
      if (!title) return alert('请输入一个非空的值')
      // 添加新对象
      const obj = { title, done: false }
      // data数据中追加obj
      data.push(obj)
      // 重新渲染页面
      render()
      // 清空表单值
      $(this).val('')
    }
  })

  // 3. 删除todo
  $('#todolist, #donelist').on('click', 'a', function () {
    // 为什么不能使用jq提供index()方法 ????
    // const index = $(this).index()

    // 通过自定义属性获取索引
    const index = +$(this).attr('data-index')
    // data数据进行删除
    data.splice(index, 1)
    // 重新渲染页面
    render()
  })


  // 4. 切换两个列表
  $('#todolist, #donelist').on('change', 'input', function () {
    // 获取当前点击的checked属性
    const state = $(this).prop('checked')
    // 如何获取当前的索引
    const i = +$(this).siblings('a').attr('data-index')
    // 改变data中的done属性
    data[i].done = state
    // 重新渲染页面
    render()
  })




})