添加功能思路:使用空数组 ---创建对象---追加到数组中---最后调用一个重载函数(专门根据数组来拼接成页面结构到页面中)
删除功能思路:使用filter函数,将数组中的时间戳time值进行相比较,把与点击时的时间戳不相等的过滤出来。最后在使用重载函数,进行刷新页面即可。
若在拼接的字符串中添加一个点击事件来进行删除的时候,会出现一个小问题:会报错del is not defined .
其原因在于在拼接字符串结构中的方法必须是全局变量
解决方法有两种:
方法1:将del定义为全局函数----给window增加一个del属性,再将函数变成箭头函数就可以获取到外部的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="ipt" />
<input type="button" id="btn" value="发布" />
<ul id="list"></ul>
<script>
function TodoList() {
//属性
/* 1、准备一个数组保存所有的信息 */
this.dataArr = [];
//获取需要用的元素
this.sendBtn = document.querySelector("#btn");
this.ipt = document.querySelector("#ipt");
this.list = document.querySelector("#list");
//方法
/* 2、给发布按钮添加点击事件 */
this.sendFn = function() {
//点击的时候获取输入框的值--创建一个对象{content:"输入框的值",time:Date.now()}
this.sendBtn.onclick = () => {
let content = this.ipt.value;
let obj = {
content,
time: Date.now(),
};
this.dataArr.push(obj);
this.loadList();
};
};
/* 3、封装一个函数loadList 根据数组 拼接成页面结构给ul */
this.loadList = function() {
let html = "";
this.dataArr.forEach((obj) => {
html += `
<li>
<p>${obj.content}</p>
<span>${obj.time}</span>
<button onclick="del(${obj.time})">删除</button>
</li> `;
});
console.log(html);
this.list.innerHTML = html;
//清除输入框的内容
this.ipt.value = "";
};
/* 4、实现删除功能 */
//法1:
window.del = (time) => {
// console.log("aaa");
console.log(this); //此处的this指的是window,要想指向外面的对象,将函数变成箭头函数即可
this.dataArr = this.dataArr.filter((v) => v.time != time);
this.loadList();
};
//此处直接写del()
//报错:del is not denfined 原因:拼接的字符串结构中的onclik="del()"这个函数必须是全局变量
/* 解决方法:
法1:将del定义为全局函数 给window增加一个del属性
法2:不通过拼接字符串给字符删除功能--通过获取所有的删除按钮-遍历-添加点击事件*/
this.sendFn();
}
let todo = new TodoList();
</script>
</body>
</html>
方法2:不采用字符串拼接的方法,通过获取所有的删除按钮---遍历---添加点击事件
首先在删除方法内部获取到所有的删除按钮,然后遍历所有按钮,进行添加点击事件。在生成的类表的时候给button增加自定义属性 用来保存time(也就是自己定义一个新的类名)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="ipt" />
<input type="button" id="btn" value="发布" />
<ul id="list"></ul>
<!-- -->
<script>
function TodoList() {
/* 1、准备一个数组保存所有的信息 */
this.dataArr = [];
//获取需要用的元素
this.sendBtn = document.querySelector("#btn");
this.ipt = document.querySelector("#ipt");
this.list = document.querySelector("#list");
/* 2、给发布按钮添加点击事件 */
this.sendFn = function() {
//点击的时候获取输入框的值--创建一个对象{content:"输入框的值",time:Date.now()}
this.sendBtn.onclick = () => {
let content = this.ipt.value;
let obj = {
content,
time: Date.now(),
};
this.dataArr.push(obj);
this.loadList();
};
};
/* 3、封装一个函数loadList 根据数组 拼接成页面结构给ul */
this.loadList = function() {
let html = "";
this.dataArr.forEach((obj) => {
html += `
<li>
<p>${obj.content}</p>
<span>${obj.time}</span>
<button class="del-btn" data-time="${obj.time}">删除</button>
</li> `;
});
console.log(html);
this.list.innerHTML = html;
//清空输入框的内容
this.ipt.value = "";
//只有拼接完字符串--给ul之后,页面中才有删除按钮
this.delFn();
};
/* 4、实现删除功能 */
//法2:
//方法内部 获取所有的删除按钮--添加点击事件
//注:必须在loadList最后调用,还要在生成类表的时候给button增加自定义属性 存time
this.delFn = function() {
let delBtns = document.querySelectorAll(".del-btn");
console.log(delBtns);
//遍历每一个按钮
delBtns.forEach((btn) => {
btn.onclick = () => {
//console.log(btn);
//console.log("点击了按钮");
//获取time---过滤数组---loadList
let time = btn.getAttribute("data-time");
console.log(time);
this.dataArr = this.dataArr.filter((v) => v.time != time);
this.loadList();
};
});
};
this.sendFn();
// this.delFn();一开始就给删除按钮添加功能,页面打开的时候是没有删除按钮的--获取不到删除按钮
}
let todo = new TodoList();
</script>
</body>
</html>