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爬虫(一)_爬虫原理和数据抓取

    本篇将开始介绍Python原理,更多内容请参考:Python学习指南 为什么要做爬虫 著名的革命家.思想家.政治家.战略家.社会改革的主要领导人物马云曾经在2015年提到由IT转到DT,何谓DT,DT ...

  2. Java线程面试题

     1:什么是线程?    线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线 ...

  3. 使用XML设计某大学主页站点地图--ASP.NET

    一.使用XML设计某大学主页站点地图步骤如下 1.创建一个空网站,在项目文件上右击,然后[添加新项],选择[站点地图],新建一个可默认为Web.sitemap的文件. 2.在Web.sitemap里修 ...

  4. 为什么ERP行业发展缓慢规模难扩大？

    题记:这个行业只会越来越好,但是能沉淀下来做事儿的企业越来越少,因为收益真的很漫长:能够真正进入这个行业难,出去也难... 经常在知乎上看到类似的问题:既然所有ERP系统都很烂,那有没有创业公司的空间 ...

  5. 字节、十六进制字符串相互转换（asc2hex、hex2asc）

    //================================================================== /** 功能: 将16进制数组转换成asc字符数组(短转长) ...

  6. Mysql--触发器的操作

    1.为什么使用触发器 2.创建触发器 2.1 创建有一条执行语句的触发器 例子:在数据库company中存在两个表对象:部门表(t_dept)和日记表(t_diary),创建触发器实现向部门表中插入记 ...

  7. Servlet交互【重定向 与 请求分派】详解

    Servlet交互 在serlvet中,需要调用另外一个资源来对浏览器的请求进行响应,两种方式实现: 调用HttpServletResponse.sendRedirect 方法实现 重定向 调用Req ...

  8. 初学PHP心得（第一天）

    我是PHP初学者,听说女生挺适合学这门语言的.所以,我就下定决心,来好好的探究下它,希望它能成为我开启IT道路的第一道关卡. 今天心血来潮,来记录下一天的成果和收获吧.既然想法有了,那就要去实现它.于 ...

  9. hdu 2586 How far away ？倍增LCA

    hdu 2586 How far away ?倍增LCA 题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2586 思路: 针对询问次数多的时候,采取倍增 ...

  10. mybatis中使用if标签比较两个字符串是否相等

    <!-- 此处使用if比较是否相等 --> 范例一: <select id="findClientIds" parameterType="map&quo ...