学习用jQuery写待办事项的思路
跟着 pink 老师学前端(为了自己梳理思路)
一:具体的css页面
二:js部分
首先你想要一个待办事项,想实现的功能是什么,第一个想起来的肯定是按回车就能存东西,然后就是实现按回车能有反应,那就是给按键添加事件,怎么添加,给谁添加?
- 按下回车 把完整数据 存储到本地存储里面
我们想到添加事件是通过 输入框 输入,就可以想到给input添加,给input一个ID或者类名,直接获取,用jQuery的方法就是 $(#id名字) 然后添加事件
on.("keydown" function(){
具体要实现的东西
})
现在只是给input添加了一个按下事件,那要确定安下的是哪一个键,就要用的 按键的ASCALL值 ,我们可以查表得到回车键是13。设置条件函数,如果是13那就执行接下来的函数。
if (event.keyCode === 13) {}
现在回车确定了,那接下来就是存东西了,怎么存?
写一个函数,也可以直接写在里面,但是想到之后肯定还会再用到,所以就直接写一个函数封装起来,用的时候直接调用函数,简化代码。
- 获得数据到本地存储
给函数命名为getDate()(PS:记得驼峰命名法)
function getDate(){
应该先判断现在本地有没有数据,然后存进去
存储数据的格式 ,当时写css的时候给定title和是否checked
var data = localStorage.getItem("todolist"),获取正在进行的事件的内容数据
判断数据有没有,如果不为空那个就存进去,否则就返回空值
但是需要注意的一点是存进去的需要是数组类型,get到的是字符串类型,需要转换,这里用到的转换方法是JSON.parse(data)
}
3.保存数据
再写一个函数保存数据
function savaDate(){
localStorage.setItem("todolist",JSON.stringify(data));
保存数据直接用localStorage.setItem
保存的时候要转换成字符串的形式保存,看到的才是字符串的形式
}
4.渲染数据
判断按键,转变checked属性,给与值
还要判断是否checked,如果选中,还要给整体的数据加1,不光是显示出来的问题
function load(){
先读取数据
var data = getDate();
获取到数据以后要干嘛呢,要想办法把它显示出来,那就要看看有多少数据,这时候就需要遍历数据
遍历数据$.each(data,function(){
先判断这个是已经checked还是没有
如果checked就添加到已完成的事,反之,在正在完成的事中,而且在这里面要给事项数量添加数值
先判断if(n.done当时写的时候done默认的是faluse,也就是没完成,这里指为TRUE){
如果是TRUE,那么应该给已经完成的事件添加数值
先获取到这个事件$("ul").prepend(这个是内部添加数据命令,并且会放到所有数据前面)(这里当时写css的时候是没有写的,都是动态获取的,所以需要在这里面都添加上所需要的内容,样式都提前写好了)
("<li><input type='checkbox' checked='checked'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "> </a ></li>");
todoCount++;(记得先生米昂变量,局部变量即可)
else{
如果不是上述那种情况,那就给TODOCount添加事件,同样的道理
$("ol").prepend("<li><input type='checkbox'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "> </a ></li>")
todoCount++;
}
});
这时候只是有了todoCount这个数值,并没有给到存储中
当时写的时候给他们写了id名字,直接获取元素,赋值
$("#todoCount").text(todoCount);
$("#doneCount").text(doneCount);
- 添加主函数
现在准备工作都写完了,那就去给回车键功能函数里面把这些都添加进去
添加事件on.("keydown" function(){
具体要实现的东西(就这个东西)
首先应该读取本地原有的数据,然后想办法把新的数据追加(用push追加)到本地存储,然后再渲染加载到页面上
var local =getDate();
local.push({title:$(this).val(),done:faluse});
然后保存渲染
调用函数就行了
savaDate(local);
load();
$(this).val("");
})
需要注意的是,这样点进去用户之前输入的是看不到的,所以在最开始应该先让他加载渲染一下子
$(this).val("");
这句话的目的就是让渲染之后不要重复添加东西,把当前的值清空。
- 添加删除事件
大部分的功能已经实现,我们还需要做的就是删除数据
获取UL.OL给他们添加事件
$("ol""ul").on("click","a",function(){
具体删哪一个呢,我们需要添加点击事件,这个点击之后要获取到该事件的索引号,直接删除该索引号虽在盒子的内容
var data = getDate();
var index=$(this).attr("id");因为id名字是自己起的,所以用attr来获取更合适
data.splice(index,1)这里的操作就是删除操作。表示是从index开始删除一个数
重新保存渲染一下子。
})
- 修改是已完成还是正在进行时状态
利用排他思想(为了简单直接用siblings)
添加点击事件,这次是给ul.ol里面的input添加
$("ol,ul").on("click", "input", function() {
一样的先获取数据,然后用哦排他思想锁定当前,其他不变,给定索引号
var index = $(this).siblings("a").attr("id");
然后让当前索引好的check状态变为checked,
data[index].done=$(this).prop("checked");prop() 方法设置或返回被选元素的属性和值。
保存渲染
savaDate(local);
load();
}
这样这个简单的待办事项就算写完啦
完整代码(js部分):
$(function() {
// alert(11);
// 1. 按下回车 把完整数据 存储到本地存储里面
//提前加载一下,让用户每次进去都可以看到
load();
$("#title").on("keydown", function(event) {
if (event.keyCode === 13) {
// alert("yesyes");
//现在能确定按得是回车键,接下来应该把数据存储到本地存储里面
//首先应该读取本地原有的数据,然后想办法把新的数据追加(用push追加)到本地存储,然后再渲染加载到页面上
if ($(this).val() === "") {
alert("请输入您的内容");
} else {
var local = getDate();
local.push({ title: $(this).val(), done: false });
//还得把local数据给到saveDate()本地存储
saveDate(local);
load();
$(this).val("");
}
}
//2.整个存储数据的函数,下次用直接调用就行
});
// 删除操作
$("ol,ul").on("click", "a", function() {
//先获取本地数据
// alert(66666666666666666);
var data = getDate();
//得到索引号,当时li里面写id了没?????
var index = $(this).attr("id");
//从索引号1开始取值
data.splice(index, 1);
//保存一下子数值
saveDate(data);
//重新渲染
load();
});
//修改是已完成还是正在进行时状态
$("ol,ul").on("click", "input", function() {
var data = getDate();
var index = $(this).siblings("a").attr("id");
// console.log(index);
data[index].done = $(this).prop("checked");
//保存一下子数值
saveDate(data);
//重新渲染
load();
});
//获取数据
// 存储的数据格式 var todolist = [{title: "xxx", done: false}]
function getDate() {
//先获取一下(getitem)本地的数据,设置以下判断条件,若果这里面有数据就返回值,如果没有就返回空
//若果有的话要注意一下,get道德数据是字符串,准换成数组形式存储
var data = localStorage.getItem("todolist");
if (data !== null) {
return JSON.parse(data);
} else {
return [];
}
}
//保存数据(steItem 获取到之后应该set一下),保存的时候还是应该以字符串的形式存储,要转换一下
function saveDate(data) {
localStorage.setItem("todolist", JSON.stringify(data));
}
//渲染数据,说简单点就是把set的数据整到页面上//还要判断是否checked,如果选中,还要给整体的数据加1
//不光是显示出来的问题
function load() {
//读取本地数据
var data = getDate();
//遍历数据(注意一下,有个小BUG,每次遍历如果不清楚之前额数据,他就会一直叠加,所以呀哦清除一下)
$("ol,ul").empty();
var doneCount = 0;
var todoCount = 0;
$.each(data, function(i, n) {
if (n.done) {
//这是判断已经有的事项是不是被选中,被选中就数量加一,在页面中显示内容
$("ul").prepend("<li><input type='checkbox' checked='checked'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "> </a ></li>");
doneCount++;
} else {
//这是判断有没有新的事项被写进来,写进来就数量加一,在页面中显示内容
$("ol").prepend("<li><input type='checkbox'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "> </a ></li>")
todoCount++;
}
});
//赋值
$("#todoCount").text(todoCount);
$("#doneCount").text(doneCount);
};
})