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

超级无敌奥特蔓

已于 2022-04-07 17:09:48 修改

阅读量443

点赞数

分类专栏：对象文章标签： javascript

于 2022-04-07 12:22:24 首次发布

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/124011282

版权

对象专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

删除功能思路：使用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>

超级无敌奥特蔓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
采用面向对象的方法来实现留言板的添加和删除功能

添加功能思路：使用空数组 ---创建对象---追加到数组中---最后调用一个重载函数（专门根据数组来拼接成页面结构到页面中）删除功能思路：使用filter函数，将数组中的时间戳time值进行相比较，把与点击时的时间戳不相等的过滤出来。最后在使用重载函数，进行刷新页面即可。若在拼接的字符串中添加一个点击事件来进行删除的时候，会出现一个小问题：会报错del is not defined .其原因在于在拼接字符串结构中的方法必须是全局变量解决方法有两种：方法1：将del定义为全局函数----.
复制链接

扫一扫

专栏目录