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. SQL中锁表语句简单理解(针对于一个表)

    锁定数据库的一个表 复制代码代码如下: SELECT * FROM table WITH (HOLDLOCK) 注意: 锁定数据库的一个表的区别 复制代码代码如下: SELECT * FROM tab ...

  2. Visual Studio 生成DLL文件

    新建一个项目,在菜单栏中选择“项目”/“**属性”选项,该页面中将“输出类型”下拉列表中的选项选择为“类库”,然后重新生成一下该项目,或者在“Visual Studio 2008命令提示”中输入以下命 ...

  3. C#实现将输入的数自动转换为科学计数法

    一朋友写了一个把输入的整型或浮点数转换为科学计数法表示的算法,写好后叫我去帮他看看有没有什么bug之类的没有考虑周全.我还没有细看就已经把我吓到了----整整写了将近三百行代码.我也没说他什么,只是回 ...

  4. Makefile持续学习二

    Makefile概述 一.Makefile里有什么? Makefile里主要包含5个东西:显式规则.隐晦规则.变量定义.文件指示和注释 1.显式规则:显式规则说明如恶化生成一个或多的目标文件,包含要生 ...

  5. 【转】在SAE部署WordPress

    原文:http://blog.csdn.net/jackrex/article/details/9305835 虽然几个月前我是以安装应用的形式将wordpress部署在sae,虽然当时sae应用商店 ...

  6. [转]Oracle High Water Level高水位分析

    PLSQL_性能优化系列14_Oracle High Water Level高水位分析 http://www.cnblogs.com/eastsea/p/4005814.html 一.摘要 PLSQL ...

  7. RabbitMQ和SpringBoot的简单整合列子

    一 思路总结 1 主要用spring-boot-starter-amqp来整合RabbitMQ和SpringBoot 2 使用spring-boot-starter-test来进行单元测试 3编写配置 ...

  8. iPhone X 网页导航概念

     以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具.   在移动应用程序设计中,选择汉堡菜单按钮还是标签栏作为导航一直是个古老的争论话题.目前看来,由于 ...

  9. lumen 中间件详解

    我来给大家,讲解一下lumen中的中间件,高手勿喷. 首先,我们看下lumen中文档中的写法,我这里看的是5.3中文文档.https://lumen.laravel-china.org/docs/5. ...

  10. canvas动画之动态绘出六边形

    先上 demo: http://en.jsrun.net/W5iKp/show 这两天我一直在研究这个动画,花了大量的时间来想是如何实现的, 一开始我是想在进入 canvas 时按时间来用 lineT ...