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. 29.使用register_chrdev_region()系列来注册字符设备

    1.之前注册字符设备用的如下函数注册字符设备驱动: register_chrdev(unsigned int major, const char *name,const struct file_ope ...

  2. 使用Jquery.js框架和CSS3实现3D相册的制作

    有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserv ...

  3. 诸葛马前课andoid app 应用

    前段时间学了点安卓开发的知识,也在同时,陪家人看了<新闺蜜时代 >的后面几集,其中,周小北提到了诸葛马前课. 于是网上查了些资料,学习了一下马前课的计算方法,本着程序服务生活的原则,省去不 ...

  4. <p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？

    最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...

  5. 【解决方案】纯js动态克隆表一行元素

    1 m = 0 ;// 用于区分input // 新增一条录入 function AddTR(){ m += 1; var tableObject = document.getElementById( ...

  6. HTML5技术分享 ES2017继发与并发

    大家都知道,async函数的返回值是 Promise 对象,这比 Generator 函数的返回值是 Iterator 对象方便多了.你可以用then方法指定下一步的操作. 进一步说,async函数完 ...

  7. 一步一步搞懂支持向量机——从牧场物语到SVM（上）

    之前在数据挖掘课程上写了篇关于SVM的"科普文",尽量通俗地介绍了SVM的原理和对各公式的理解.最近给正在初学机器学习的小白室友看了一遍,他觉得"很好,看得很舒服&quo ...

  8. pyqt5实现注册界面

    __author__ = 'sign_in' import sys from PyQt5.QtGui import QPixmap from PyQt5.QtWidgets import * clas ...

  9. 如何使用MFC连接Access数据库

    (1)新建一个Access数据库文件.将其命名为data.mdb,并创建好表.字段. (2)为系统添加数据源.打开“控制面板”—>“管理工具”—>“数据源”,选择“系统DSN”,点击右边的 ...

  10. C语言一些知识点总结

    一.关键字 1. 什么是关键字 1> 关键字就是C语言提供的有特殊含义的符号,也叫做“保留字” 2> C语言一共提供了32个关键字,这些关键字都被C语言赋予了特殊含义 auto doubl ...