this问题
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();
};
随机推荐
- Vue浅谈
谈Vue 最近在学习Vue相关的知识点并且也做一些练手,就在学习过程中出现的各种坑爹的地方做一个总结!之后再遇到也不会抓瞎. 1.Vue工程的安装 (1)首先先安装node.js这是Vue的运行基础. ...
- MVC 小案例 -- 信息管理
前几次更新博客都是每次周日晚上到周一,这次是周一晚上开始写,肯定也是有原因的!那就是我的 Tomact 忽然报错,无法启动,错误信息如下!同时我的 win10 也崩了,重启之后连 WIFI 的标志也不 ...
- Qt----拖拽
最近比较忙,今天此才有时间来继续学习下Qt.Qt的拖拽可以按字面意思分为拖和拽两部分.一般来说我们常见的拖拽分别由两个程序合作完成.例如我们经常把桌面的文件拖拽进其他目录: 这个拖拽在Qt中由两方合作 ...
- JQuery使用笔记
1.选择器 id选择器: $('#btnShow') class选择器: $('.banner') tag选择器: $('input') 2.常用方法 取 / 设value: $('#btnShow' ...
- Python StringIO与BytesIO、类文件对象
StringIO与BytesIO StringIO与BytesIO.类文件对象的用途,应用场景,优.缺点. StringIO StringIO 是io 模块中的类,在内存中开辟的一个文本模式的buff ...
- Python [习题] 字典扁平化
习题: 将以下字典扁平化,输出为 target 字典格式source = {'a': {'b': 1, 'c': 2}, 'd': {'e': 3, 'f': {'g': 4}}}target = { ...
- DNS:域名系统
概述: DNS的作用在于将域名转换为对应的IP地址. DNS名字空间和UNIX文件系统相似,也是树形结构.以"."结尾的域名称为FQDN(Full Qualified Domain ...
- Unity3D游戏GC优化总结---protobuf-net无GC版本优化实践
protobuf-net优化效果图 protobuf-net是Unity3D游戏开发中被广泛使用的Google Protocol Buffer库的c#版本,之所以c#版本被广泛使用,是因为c++版本的 ...
- AIO5物料清单（BOM）列表，搜索编码和名称无效
问题: AIO5物料清单(BOM)列表,搜索编码和名称无效.如图: 原因分析 AIO5的BOM是在二次开发平台上做的,在制作自定义单据的时候[查询参数设置]没有设置.如下图: 解决方案 工具:AIO5 ...
- ndk-stack使用方法
最近在mac上编译android 版本,各种崩溃让人蛋疼,网上学习了下ndk-stack使用方法. 自己备忘下: 1.运行终端. 跳转到你android sdk 目录 因为你的adb 在里面. 如 c ...