怎么用jQuery实现todolist呢?
那就接着往下看吧!
toDoList核心思想
1.文本框里面输入内容,按下回车,就可以生成待办事项
2.点击待办事项复选框,就可以把当前数据添加到已完成事项里面
3.点击已完成事项复选框,就可以把当前数据添加到待办事项里面
4.但是本页面内容刷新不会消失
(1)刷新页面不会丢失数据,因此需要用到本地 存储localStorage
(2)核心思路:不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新页面不会丢失数据
(3)存储的数据格式: var todolist = [{title:'xxx',done:false}]
注意1:本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
注意2.获取本地存储数据我们需要把里面的字符串数据转换成 对象格式 JSON.parse()
todolist按下回车把新数据添加到本地存储里面
1.切记页面中的数据,都要从本地存储里获取,这样刷新页面就不会丢失数据,所以要先把数据保存到本地数据里面
2.利用事件对象.keyCode判断用户按下回车键(keyCode == 13)
3.声明一个数组,保存数据
4.先要读取本地存储原来的数据(声明函数getData()),放到这个数组里面
5.之后把最新从表单获取过来的数据,追加到数组里面
6.最后把数组存储给本地存储(声明函数savaDate())
todolist本地存储数据渲染加载到页面
1.因为后面也会经常渲染加载操作,所以声明一个函数load,方便以后调用
2.先要读取本地存储数据。不要忘转换为对象格式
3.之后遍历这个数据($.each()),有几条数据,就生成几个小li添加到ol里
4.每次渲染之前,先把原先的ol的内容清空,然后渲染加载最新的数据
注意:在最开始的时候也要渲染页面哦
删除操作
1.点击里面的a链接,不是删除小li,而是删除本地存储对应的数据
2.核心原理:先获取本地存储数据,删除对应的数据,保存给本地存储,重新渲染列表li
3.我们可以给链接自定义属性记录当前的索引号
4.根据这个索引号删除相关的数据----数组的splice(i,1)方法
5.存储修改后的数据,然后存储给本地存储
6.重新渲染加载数据列表
7.因为a是动态创建的,我们使用on方法绑定事件
正在进行和已完成选项操作
1.当我们点击了小的复选框,修改本地存储,再重新渲染数据列表
2.点击之后,获取本地存储数据
3.修改对应数据属性done为当前复选框的checked状态
4.之后保存数据到本地存储
5.重新渲染加载数据列表
6.load加载函数里面,新增一个条件,如果当前数据的done为true就是已经完成的,就把列表 渲染加载到ul里面
7.如果当前数据的done为false,则是待办事项,就把列表渲染加载到ol里面
统计正在进行个数和已经完成个数
1.在我们load函数里面操作
2.声明2个变量:todoCount待办个数 doneCount 已完成个数
3.当进行遍历本地存储数据的时候,如果数据done为false,则todoCount++,否则doneCount++
4.最后修改相应的元素text