ToDoList的jQuery写法，快来看看吧

ToDoList使用jq编写

• html

<input type=\"text\" class=\"sendBtn\"><h2>未完成</h2><ul class=\"list1\"><!-- <li><input type=\"checkbox\" name=\"\" id=\"\" value=\"\" /><span id=\"\">吃饭</span><button type=\"button\">删除</button></li> --></ul><h2>已完成</h2><ul class=\"list2\"><!-- <li><input type=\"checkbox\" name=\"\" id=\"\" value=\"\" checked=\"checked\"/><span id=\"\">睡觉</span><button type=\"button\">删除</button></li> --></ul>

• js代码

let sendBtn = $(\'.sendBtn\');let arr = [// status true 表示已完成{name: \'看电视\',status: false},{name: \'玩游戏\',status: true},];render()//发送按钮sendBtn.change(function(){let name = sendBtn.val();let obj = {name: name,status: false};arr.push(obj);render()})//根据数据 arr  渲染页面 产生页面function render() {let list1 = $(\'.list1\')let list2 = $(\'.list2\')//拼字符串let list1Html = \'\';let list2Html = \'\';for (let i = 0; i < arr.length; i++) {let obj = arr[i];if (obj.status == false) {list1Html +=`<li><input type=\"checkbox\" name=\"\" id=\"\" value=\"\" data-name=\"${obj.name}\"/><span id=\"\">${obj.name}</span><button type=\"button\" class=\"dBtn\" data-name=\"${obj.name}\">删除</button></li>`} else {list2Html +=`<li><input type=\"checkbox\" name=\"\" id=\"\" value=\"\" checked=\"checked\" data-name=\"${obj.name}\"/><span id=\"\">${obj.name}</span><button type=\"button\" class=\"dBtn\" data-name=\"${obj.name}\">删除</button></li>`}}list1.html(list1Html)list2.html(list2Html)//删除按钮$(\'.dBtn\').click(function(){console.log(11)let name = $(this).attr(\'data-name\');arr = arr.filter(v=>v.name !== name)render()})//修改按钮$(\'input[type=checkbox]\').change(function(){////点击的是 未完成的列表//修改数组对应的元素的 属性值, 然后渲染页面let name = $(this).attr(\'data-name\')let obj = arr.find(v=>v.name === name);console.log(obj)obj.status = this.checked;render()})}

• 如果你想了解该文章代码的实现过程，请翻看我的另一篇todolist文章，上面有代码思路。