采用面向对象的方法来实现留言板的添加和删除功能

添加功能思路：使用空数组 ---创建对象---追加到数组中---最后调用一个重载函数（专门根据数组来拼接成页面结构到页面中）

删除功能思路：使用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增加自定义属性 存timethis.delFn = function() {let delBtns = document.querySelectorAll(".del-btn");console.log(delBtns);//遍历每一个按钮delBtns.forEach((btn) => {btn.onclick = () => {//console.log(btn);//console.log("点击了按钮");//获取time---过滤数组---loadListlet 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>

采用面向对象的方法来实现留言板的添加和删除功能相关推荐

使用vueaxios请求的get方式实现留言评论的添加，删除功能
实现样式 axios请求 axios.get(url, {params: {key: value} }).then( res => {console.log(res.data) })axios. ...
php 删除相对应的id,PHP 在下面这个留言板代码中加入删除按钮，每一个删除按钮删除相对应一行数据，这怎么弄...
匿名用户 1级 2014-07-15 回答看看这样如何,其中response_foo.php为响应页, 可以写到每一行中间追问: 不是啊我想要点一个删除那一行的数据全部没有我这个是循环留言板 ...
JS数组方法汇总 array数组元素的添加和删除
2019独角兽企业重金招聘Python工程师标准>>> unshift:将参数添加到原数组开头,并返回数组的长度 pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回u ...
系统设计知识：面向对象设计方法介绍
面向对象设计(Object Oriented Design,OOD)是面向对象分析(OOA)方法的延续,是在OOA模型的基础上,采用面向对象的方法,主要解决与实现相关的问题,最终目标是产生一个符号具体 ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
【Nodejs】留言板案例
文章目录 1 统一处理服务器资源: 1.1 关于fs.readdir() 文件目录读取: 1.2 模板引擎: 1.2.1 在node中使用模板引擎: 1.2.2 each : 2 留言板: 2.1 实 ...
基于jsp+sevlet+mysql实现留言板
基于jsp+sevlet+mysql实现留言板一.系统介绍二.功能展示 1.用户登陆 2.用户注册 3.留言信息 4.添加留言三.获取源码一.系统介绍系统主要功能: 用户登陆.用户注册.留言 ...
php 审核功能,随缘网络PHP留言板(带审核功能)
经过一些时间的努力,随缘网络PHP留言板V1.0(带审核功能)总算正式发布了,该留言系统采用PHP+MYSQL编写,界面色调风格延续之前asp版留言系统简洁浅蓝色风格,稍有所变动.希望大家能够喜欢.初 ...
php留言板带审核,随缘网络PHP留言板(带审核功能) v1.0 build 091017
经过一些时间的努力,随缘网络PHP留言板V1.0(带审核功能)总算正式发布了,该留言系统采用PHP+MYSQL编写,界面色调风格延续之前asp版留言系统简洁浅蓝色风格,稍有所变动.希望大家能够喜欢.初 ...

采用面向对象的方法来实现留言板的添加和删除功能

采用面向对象的方法来实现留言板的添加和删除功能相关推荐

最新文章

热门文章