jQuery模仿ToDoList实现简单的待办事项列表
Posted sunyan-blog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery模仿ToDoList实现简单的待办事项列表相关的知识，希望对你有一定的参考价值。
功能：在文本框中输入待办事项按下回车后，事项会出现在未完成列表中；点击未完成事项前边的复选框后，该事项会出现在已完成列表中，反之亦然；点击删除按钮会删除该事项。待办事项的数据是保存到本地存储的（localStorage），就算关闭页面再打开，数据还是存在的（前提是要用相同浏览器）。
ToDoList链接：ToDoList—最简单的待办事项列表
先把css样式以及js文件引入进来，jQuery文件要写在你自己的js文件上边
<link rel="stylesheet" href="css/index.css"> <script src="js/jquery.min.js"></script> <script src="js/todolist.js"></script>
html代码：
1 <body> 2 <header> 3 <section> 4 <label for="title">ToDoList</label> 5 <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" /> 6 </section> 7 </header> 8 <section> 9 <h2>正在进行 <span id="todocount"></span></h2> 10 <ol id="todolist" class="demo-box"> 11 12 </ol> 13 <h2>已经完成 <span id="donecount"></span></h2> 14 <ul id="donelist"> 15 16 </ul> 17 </section> 18 <footer> 19 Copyright © 2019 20 </footer> 21 </body>
1 body { 2 margin: 0; 3 padding: 0; 4 font-size: 16px; 5 background: #CDCDCD; 6 } 7 8 header { 9 height: 50px; 10 background: #333; 11 background: rgba(47, 47, 47, 0.98); 12 } 13 14 section { 15 margin: 0 auto; 16 } 17 18 label { 19 float: left; 20 width: 100px; 21 line-height: 50px; 22 color: #DDD; 23 font-size: 24px; 24 cursor: pointer; 25 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 26 } 27 28 header input { 29 float: right; 30 width: 60%; 31 height: 24px; 32 margin-top: 12px; 33 text-indent: 10px; 34 border-radius: 5px; 35 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset; 36 border: none 37 } 38 39 input:focus { 40 outline-width: 0 41 } 42 43 h2 { 44 position: relative; 45 } 46 47 span { 48 position: absolute; 49 top: 2px; 50 right: 5px; 51 display: inline-block; 52 padding: 0 5px; 53 height: 20px; 54 border-radius: 20px; 55 background: #E6E6FA; 56 line-height: 22px; 57 text-align: center; 58 color: #666; 59 font-size: 14px; 60 } 61 62 ol, 63 ul { 64 padding: 0; 65 list-style: none; 66 } 67 68 li input { 69 position: absolute; 70 top: 2px; 71 left: 10px; 72 width: 22px; 73 height: 22px; 74 cursor: pointer; 75 } 76 77 p { 78 margin: 0; 79 } 80 81 li p input { 82 top: 3px; 83 left: 40px; 84 width: 70%; 85 height: 20px; 86 line-height: 14px; 87 text-indent: 5px; 88 font-size: 14px; 89 } 90 91 li { 92 height: 32px; 93 line-height: 32px; 94 background: #fff; 95 position: relative; 96 margin-bottom: 10px; 97 padding: 0 45px; 98 border-radius: 3px; 99 border-left: 5px solid #629A9C; 100 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); 101 } 102 103 ol li { 104 cursor: move; 105 } 106 107 ul li { 108 border-left: 5px solid #999; 109 opacity: 0.5; 110 } 111 112 li a { 113 position: absolute; 114 top: 2px; 115 right: 5px; 116 display: inline-block; 117 width: 14px; 118 height: 12px; 119 border-radius: 14px; 120 border: 6px double #FFF; 121 background: #CCC; 122 line-height: 14px; 123 text-align: center; 124 color: #FFF; 125 font-weight: bold; 126 font-size: 14px; 127 cursor: pointer; 128 } 129 130 footer { 131 color: #666; 132 font-size: 14px; 133 text-align: center; 134 } 135 136 footer a { 137 color: #666; 138 text-decoration: none; 139 color: #999; 140 } 141 142 @media screen and (max-device-width: 620px) { 143 section { 144 width: 96%; 145 padding: 0 2%; 146 } 147 } 148 149 @media screen and (min-width: 620px) { 150 section { 151 width: 600px; 152 padding: 0 10px; 153 } 154 }
接下来开始写我们自己的js代码
将多次使用的代码封装成函数，方便使用
①获取本地存储的数据。如果本地有数据则直接获取过来，没有数据的话就返回一个空数组
1 function getDate() { 2 var data = localStorage.getItem("todolist"); // 将获取到的数据赋给data 3 if(data !== null) { // 如果本地有数据，则返回数据 4 return JSON.parse(data); // 本地存储只能存储字符串，所以要想获取里边的数据就必须将字符串转换为数组形式返回 5 } else { 6 return []; // 如果本地没有数据，则返回一个空数组 7 } 8 }
②保存本地存储数据
1 function saveDate(data) { 2 // 用JSON.stringify()将数组转化成字符串保存到本地存储 3 localStorage.setItem("todolist", JSON.stringify(data)); 4 }
③渲染页面 加载数据
先将本地存储数据获取过来；将他们遍历（遍历之前先将列表清空），看他们是否已经被完成（通过数组里我们自己添加的done的值为true还是false来判断），如果已经被完成则添加到ul列表，否则添加进ol列表里；同时声明两个变量来保存已完成和未完成事项的个数
1 function load() { 2 var data = getDate(); // 先获取本地存储数据 3 4 // 遍历本地存储数据 将他们添加到列表中 5 $("ol, ul").empty(); // 遍历之前先清空列表 6 var doneCount = 0; // 已经完成的个数 7 var todoCount = 0; // 正在进行的个数 8 $.each(data, function(i, ele) { // i为索引 ele为遍历对象 9 // 如果复选框被选中（已完成done: true）添加到ul里，未被选中（未完成done: false）添加到ol里 10 if(ele.done) { 11 $("ul").prepend("<li><input type=‘checkbox‘ checked=‘checked‘ > <p>" + ele.title + "</p> <a href=‘javascript:;‘ index=" + i + "></a></li>"); 12 doneCount++; // 每添加一个li，已完成数加一 13 } else { 14 $("ol").prepend("<li><input type=‘checkbox‘> <p>" + ele.title + "</p> <a href=‘javascript:;‘ index=" + i + "></a></li>"); 15 todoCount++; 16 } 17 }) 18 $("#donecount").text(doneCount); 19 $("#todocount").text(todoCount); 20 }
1. 用户输入待办事项按下回车，将事项添加进列表
给文本框绑定键盘按下事件，通过ASCII值来判断用户是否按下了回车（回车的ASCII值为13）；
不能直接在本地存储里更改数据，所以要先获取数据（数组形式），把数组进行更新数据（把最新数据追加给数组），再保存到本地存储；
然后对页面进行重新渲染 更新数据
1 load(); // 第一步先渲染页面，不然一开始刷新页面时列表不显示 2 $("#title").on("keydown", function(event) { 3 if(event.keyCode === 13) { 4 if($(this).val() !== "") { 5 var data = getDate(); // 获取本地存储数据 6 // 把数组进行更新数据，把最新数据追加给数组 7 data.push({title: $(this).val(), done: false}); 8 saveDate(data); // 保存到本地存储 9 load(); // 渲染加载到页面 10 $(this).val(""); 11 } 12 } 13 })
2. 删除待办事项
先获取本地存储数据；
用attr获取自定义属性index（索引）得到用户点击的第几个事项，通过索引删除数组里对应的那组数据；
将更新过的数组保存到本地存储 再渲染给页面
1 $("ol, ul").on("click", "a", function() { 2 var data = getDate(); // 获取本地数据（data是局部变量，不用担心冲突） 3 var index = $(this).attr("index"); // 用attr获取自定义属性index，得到索引 4 // splice(index, num)删除数组对象 index为开始删除的位置，num为删除几个 5 data.splice(index, 1); 6 saveDate(data); 7 load(); 8 })
3. 用户点击复选框来选择事项已完成或未完成
获取本地存储数据；
通过复选框的兄弟a的index属性来获取用户点击的事项的索引（index），将第index个数据的done属性值修改为复选框的值；
将更新过的数组保存到本地存储 再渲染给页面
1 $("ol, ul").on("click", "input", function() { 2 var data = getDate(); 3 // 利用a获取用户点击的第几个复选框 4 var index = $(this).siblings("a").attr("index"); 5 // 修改数据：data[索引].属性名 获取固有属性用prop 6 data[index].done = $(this).prop("checked"); 7 saveDate(data); 8 load(); 9 })
详细JS代码：
1 $(function() { 2 load(); // 先渲染页面，不然一开始刷新页面时列表不显示 3 // 1、绑定键盘按下事件 4 $("#title").on("keydown", function(event) { 5 if(event.keyCode === 13) { // 是否按下了回车 回车的ASCII值为13 6 if($(this).val() == "") { 7 alert("请输入事项内容！") 8 } else { 9 // 不能直接在本地存储里改数据，所以要先获取数据，然后改变数组，再保存到本地 10 var data = getDate(); // 获取本地存储数据 11 // 把数组进行更新数据，把最新数据追加给数组 12 data.push({title: $(this).val(), done: false}); 13 saveDate(data); // 保存到本地存储 14 load(); // 渲染加载到页面 15 $(this).val(""); 16 } 17 } 18 }) 19 //2、删除待办事项 20 $("ol, ul").on("click", "a", function() { 21 var data = getDate(); // 获取本地数据 22 var index = $(this).attr("index"); // 用attr获取自定义属性，得到索引 23 // splice(index, num)删除数组对象 index为开始删除的位置，num为删除几个 24 data.splice(index, 1); 25 saveDate(data); // 删除后在把data保存到本地存储 26 load(); // 重新渲染页面 27 }) 28 //3、正在进行和已完成 29 $("ol, ul").on("click", "input", function() { 30 var data = getDate(); // 获取数据 31 // 获取用户点击的第几个按钮，利用a 32 var index = $(this).siblings("a").attr("index"); 33 // 修改数据 data[索引].属性名 获取固有属性用prop 34 data[index].done = $(this).prop("checked"); 35 saveDate(data); // 保存到本地存储 36 load(); // 渲染页面 37 }) 38 // 获取本地存储数据 39 function getDate() { 40 var data = localStorage.getItem("todolist"); 41 if(data !== null) { // 如果本地有数据，则返回数据 42 return JSON.parse(data); // 本地存储只能存储字符串，所以要将字符串转换为数组形式返回 43 } else { // 如果本地没有数据，则返回一个空数组 44 return []; 45 } 46 } 47 // 保存本地存储数据 48 function saveDate(data) { 49 // 用JSON.stringify()将数组转化成字符串保存到本地存储 50 localStorage.setItem("todolist", JSON.stringify(data)); 51 } 52 // 渲染加载数据 53 function load() { 54 var data = getDate(); // 先获取本地存储数据 55 // 遍历本地存储数据 将他们添加到列表中 56 $("ol, ul").empty(); // 遍历之前先清空列表 57 var doneCount = 0; // 已经完成的个数 58 var todoCount = 0; // 正在进行的个数 59 $.each(data, function(i, ele) { // i是索引 ele为遍历对象 60 // 如果复选框被选中（已完成）添加到ul里，没被选中（未完成）添加到ol里 61 if(ele.done) { 62 $("ul").prepend("<li><input type=‘checkbox‘ checked=‘checked‘ > <p>" + ele.title + "</p> <a href=‘javascript:;‘ index=" + i + "></a></li>"); 63 doneCount++; 64 } else { 65 // 将数据添加进列表里 66 $("ol").prepend("<li><input type=‘checkbox‘> <p>" + ele.title + "</p> <a href=‘javascript:;‘ index=" + i + "></a></li>"); 67 todoCount++; 68 } 69 }) 70 $("#donecount").text(doneCount); 71 $("#todocount").text(todoCount); 72 } 73 })
以上是关于jQuery模仿ToDoList实现简单的待办事项列表的主要内容，如果未能解决你的问题，请参考以下文章
第七讲、Vue3.x 实现一个完整的toDoList（待办事项）