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. PLSQL锁表之后改如何操作

    (1)查看哪个表被锁select b.owner,b.object_name,a.session_id,a.locked_mode from v$locked_object a,dba_objects ...

  2. 初识Java网络编程

    事实上网络编程简单的理解就是两台计算机相互通讯数据而已,对于程序员而言,去掌握一种编程接口并使用一种编程模型相对就会显得简单的多了,Java SDK提供一些相对简单的Api来完成这些工作.Socket ...

  3. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  4. python基础（一）------Python基础语法与介绍

    编程语言的历史和Python开发 一.编程语言 1.编程语言也是"语言"与英语,汉语等类似,掌握其语法结构,灵活 的运用其语法规则为之重要.          编程语言实现的是程序 ...

  5. MySQL5.6的optimizer_trace

    MySQL的explain是各种执行计划选择的结果,如果想看整个执行计划以及对于多种索引方案之间是如何选择的? MySQL5.6中支持这个功能,optimizer_trace 这个是mysql的参数, ...

  6. mybatis逆向工程使用步骤详解

    使用mybatis生成逆向工程的详细步骤,我个人感觉这个是最简单的一个了,虽然网上有很多种的方法来生成逆向工程,可是这个方法最简单.在这里我是使用maven搭建的环境,但是在正常的环境下也是一样的.步 ...

  7. P2704 炮兵阵地

    题目描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用“H” 表示),也可能是平原(用“P”表示),如下图.在每一格平原地形上最 ...

  8. SharePoint 路在何方？

    听着老版<西游记>熟悉的片头曲,想着九寨沟取景的地点现在已然不在了,看着自己的现状,真是五味杂陈.从2010年至今,接触SharePoint已经是第七个年头了,不知不觉都已经成为习惯.从2 ...

  9. sharePreference

    源码分析请看:http://blog.csdn.net/yanbober/article/details/47866369 一.  SharePreferences是用来存储一些简单配置信息的一种机制 ...

  10. RedHat升级Python到2.7.6

    今天本来想研究一下Python  paramiko模块,安装安装 paramiko-1.10.1.tar.gz的时候报错,!看了一下虚拟机RedHat中的python,发现还是原生的2.4.3,所以决 ...