this问题

弹出层是一种很常见的页面显示部件,利用require js的模块化可以使部分功能组件重用性更高.以弹出层为例,探讨关于this的问题

首先来看这样一段代码

Html部分代码

<body>
    <button id="open">open</button>
    <div class="dialog-container">
        <div class="dialog-mask"></div>
        <div class="dialog-box">
            <div class="dialog-title">
                <div class="dialog-title-item">弹出层</div>
                <div class="dialog-title-close">[X]</div>
            </div>
            <div class="dialog-content">content</div>
        </div>
    </div>
    <script src="js/require.js" data-main="js/index"></script>
</body>

点击open按钮会显示弹出层,并且点一下open会有一个弹出层,点击[X]会关闭当前弹窗,简单的css和js代码我不贴出来看了

可以看到每当我点击一次open按钮,都会创建一个class=”dialog-container”的div

Js代码示例一:

$(".dialog-title-close").on("click", function(){
    $(".dialog-container").remove();
});

当我点击关闭按钮时,可以看到是所有class为dialog-container的都被清除,所以和需求不符,要求为当前的对话框关闭.此时我们可以想到this.

Js代码示例二:

利用类及类创建的对象,每一个对象的关闭即可实现需求

封装一个类,步骤省略,关闭部分代码如下所示

var that = this;
    this.close.on("click", function(){
        that.closeDialog();
    });
};
Dialog.prototype.closeDialog = function(){
    this.container.remove();
};

随机推荐

  1. Linux常用命令100个用法

    平时用linux时,我有一个习惯就是把遇到的,比较有用,并且容易忘的命令,放到一个文本文件中,没事的时候可以拿出来看看,这样可以加深映像,时间长了这些命令的用法基本上都能掌握了.以下是100个用法,有 ...

  2. C# 关闭窗体立即停止进程

    C#在关闭窗体的时候,有时线程还在后台执行,没有及时退出. 处理方案: 为Form添加FormClosing事件,加入以下语句,在退出时,杀死本进程. System.Diagnostics.Proce ...

  3. 利用Pycharm本地调试spark-streaming（包含kafka和zookeeper等操作）

    环境准备就不说了! 第一步:打开Pycharm,在File->Setting->Project Structure中点击Add Content Root 添加本地python调用java和 ...

  4. SSD中的GC机制以及Trim

    GC(Garbagecollection)垃圾回收  所谓GC就是把一个闪存块里的"有效"页数据复制到一个"空白"块里,然后把这个块完全擦除.GC是 SSD里的 ...

  5. python 按每行读取文件怎么去掉换行符

    python按每行读取文件后,会在每行末尾带上换行符,这样非常不方便后续业务处理逻辑,需要去掉每行的换行符,怎么去掉呢?看下面的案例: >>> a = "hello wor ...

  6. AutoCAD.net支持后台线程-Socket服务端

    最近因为公司项目的需求,CAD作为服务端在服务器中常驻运行,等待客户端远程发送执行任务的指令,最终确认用Socket-tcp通讯,CAD需要实时监听客户端发送的消息,这时就需要开启线程执行Socket ...

  7. 内网神器-Bettercap

    安装bettercap 1 2 root@sch01ar:~# apt-get update root@sch01ar:~#  apt-get install bettercap 安装完成后查看一下帮 ...

  8. Apache服务器配置

    之前做代码一直按照传统化的方法部署别人的网站,但是一直不成功,尝试了很多次最后才发现时虚拟主机的问题 使用apache默认为127.0.0.1和网站的配置发生冲突. 因此在apache的conf文件夹 ...

  9. poj2524 解题报告

    基于并查集的一道简单题目 Ubiquitous Religions Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 22334 ...

  10. python并发编程之多进程一

    一,什么是进程 进程是操作系统结构的基础:是一个正在执行的程序:计算机中正在运行的程序实例:可以分配给处理器并由处理器执行的一个实体: 二,进程与程序的区别 进程即运行中的程序,从中即可知,进程是在运 ...