-
效果:
- 在输入框输入内容之后 点击添加可以向正在进行的任务下面添加上内容.还需要将新添加的内容存到本地. 2.点击一下前面的选中框的时候 可以让这一行向 已经完成的任务进行跳转.需要修改一下 在本地存储的数据中的 isOk:true 代表完成了
- 在输入框输入内容之后 点击添加可以向正在进行的任务下面添加上内容.还需要将新添加的内容存到本地. 2.点击一下前面的选中框的时候 可以让这一行向 已经完成的任务进行跳转.需要修改一下 在本地存储的数据中的 isOk:true 代表完成了
2.代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<!-- 输入框 -->
<div class="plan">
<h1>传智-ToDoList</h1>
<div>
<input class="txt" placeholder="请输入目标..." type="text" />
<input type="button" class="add" value="添加" />
</div>
</div>
<div class="w">
<h2>正在进行的任务</h2>
<ol>
<!-- <li><input type="checkbox"><span>吃饭</span></li> -->
</ol>
<h2>已经完成的任务</h2>
<ul>
<!-- <li><span>吃饭</span></li>-->
</ul>
</div>
<script src="lib/jquery-1.12.4.js"></script>
<!-- <script src="js/index.js"></script> -->
<script type="text/javascript">
//获取本地的数据
let str = localStorage.getItem("toDoList"); //进行判断是否有 如果没有话 自定义一个数据
if (str == null) {
localStorage.setItem(
"toDoList",
'[{"name":"吃饭","isOk":false },{"name":"睡觉","isOk":true }]'
);
str = localStorage.getItem("toDoList");
} //得到这个数据之后 进行循环这个数据 在每次循环中还要判断下isOk的值 决定新创建li的标签是放在哪个位置 // 在创建li标签的时候 通过attr()创建一个假设的索引值 类似于index 为了标记这个li表示的是数据中的哪个对象 所以根据数组的索引值来创建最好
let arr = JSON.parse(str);
for (let i = 0; i < arr.length; i++) {
if (arr[i].isOk == true) {
$("<li></li>")
.html("<span>" + arr[i].name + "</span>")
.appendTo("ul");
} else {
$("<li></li>")
.attr("num", i)
.html('<input type="checkbox"><span>' + arr[i].name + "</span>")
.appendTo("ol");
}
}
//设置添加事件
$(".add").click(function () {
let doThing = $(".txt").val();
let li = $(
'<li><input type="checkbox"><span>' + doThing + "</span></li>"
);
$("ol").eq(0).append(li); //页面元素已经添加完成之后 将数据更新到本地
$(".txt").val(""); //新创建的元素最好是根据本地数据的索引值设定的自定义属性
li.attr("num", arr.length);
//页面完成之后 需要在本地保存数据
arr.push({ name: doThing, isOk: false });
str = JSON.stringify(arr);
localStorage.setItem("toDoList", str);
});
//给checkbox 加上事件委托
$("ol").on("click", "input", function () {
$("ul").append($(this).parent());
$(this).hide();
let li = $(this).parent();
//通过li设定的自定义属性 num 也就是这个li对象在数组中得到索引 从而找到这个对象 然后进行修改其isOk的值
let i = li.attr("num");
arr[i].isOk = true;
str = JSON.stringify(arr);
localStorage.setItem("toDoList", str);
});
</script>
</body>
</html>
3.创作流程
1.给添加按钮 完成事件绑定
2,给checkbox 添加事件绑定 因为都是li和input都是动态创建的元素 绑定不上事件 所以使用 事件委托给外面的ol
3.在页面功能代码写好之后 需要对本地数据进行增加或者修改的处理
3.1 在页面加载的时候 首先要去本地区获取数据 通过数据中的isOk的不同 从而创建不同li标签 添加到不同位置 去显示.
注意:创建li标签的时候 需要根据数据中的每个对象自定义一个属性num
3.2 点击增加的之后 需要将内容更新到本地数据中去
3.3 点击checkbox的时候 需要根据li的获取到对应数据中的对象 从而修改一下isOk的值
注意:因为一开始在创建li标签就是根据数据中的对象的索引值创建的 并且将对象的索引值 设定成了每个li的自定义属性 通过li中的自定义属性就可以获取到 对象在数据中的索引值 从而找到这个对象 进行了修改
4总结:
在给页面创建li标签的时候 没有意识到 数据中的每个对象与li之间的关系
数据中的每个对象就相当创建的一个li对象
因为一开始的时候是在获取数据的时候创建的li对象给li增加的自定义属性 则在手动添加数据的时候 也要给li设置自定义属性