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. python的学习之路day1

    软件:python3.pycharm开发工具 python的开始:print("hello world") 注意:python3需要加上() 1.变量是什么:在程序运行过程中它的值 ...

  2. UWP Composition API - RadialMenu

    用Windows 8.1的童鞋应该知道OneNote里面有一个RadialMenu.如下图,下图是WIn10应用Drawboard PDF的RadialMenu,Win8.1的机器不好找了.哈哈,由于 ...

  3. Magicodes.Admin.Core开源框架总体介绍

    框架说明 Magicodes.Admin.Core框架在ABP以及ASP.NET ZERO的基础上进行了封装和完善,目前基于.NET Core 2.0+(Framework版本),由于部分组件在.NE ...

  4. 比较DataTable中新旧数据

    内容不写了,代码上都做了写注释. 1   /**//// <summary>  2        /// 比较两个数据表,并返回比较结果表  3        /// 比较条件:  4   ...

  5. Win10下Docker学习（1）安装

    Docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制, ...

  6. openvpn部署之快速入门实战+一键部署openvpn脚本

    个人原创禁止转载 软件环境: Centos6.9 x64 openvpn-2.4.3-1.el6.x86_64.rpm easy-rsa-2.2.2-1.el6.noarch.rpm    #推荐使用 ...

  7. Swarm 如何实现 Failover？- 每天5分钟玩转 Docker 容器技术（98）

    故障是在所难免的,容器可能崩溃,Docker Host 可能宕机,不过幸运的是,Swarm 已经内置了 failover 策略. 创建 service 的时候,我们没有告诉 swarm 发生故障时该如 ...

  8. win下搭建python3+PyQt5+eric6环境

    一.安装python3 1.下载python3的安装包,默认安装即可,注意勾选 Add Python 3.6 to Path .但是这样默认安装的路径太长,不太方便找到,可选择定制安装,自己定义安装路 ...

  9. Numpy入门 - 数组聚合运算

    本节主要讲解numpy的几个常用的聚合运算,包括求和sum.求平均mean和求方差var. 一.求和sum import numpy as np arr = np.array([[1, 2, 3], ...

  10. web更改AD用户密码

    web更改AD用户密码 #web更改AD密码 #网站配置 绑定域名ad.test.cn 功能,更改AD用户密码 #参考http://bbs.51cto.com/thread-1379675-1.htm ...