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();
};
随机推荐
-
>;>;>; 主页推荐链接
Apple专区 App Store 排行榜 App Store 排行榜 - 中国区 PC6苹果网 威锋网 第三方 环信 - 即时通讯云领导者 腾讯Bugly - Android Crash | iOS ...
-
安装phpmyadmin
1.查看PHP版本 新建文本文档,填写下面内容: <?phpphpinfo();?>保存,然后更改文件名为phpinfo.php放到你域名根目录,然后通过你的域名+phpinfo.php浏 ...
-
CentOS 6 lnmp环境脚本
实验环境:CentOS 6.3 32位 首先我们先去下载nginx的第三方yum源 mkdir /shell cd /shell wget http://www.atomicorp.com/insta ...
-
mysql not in、left join、IS NULL、NOT EXISTS 效率问题记录
原文:mysql not in.left join.IS NULL.NOT EXISTS 效率问题记录 mysql not in.left join.IS NULL.NOT EXISTS 效率问题记录 ...
-
leetcode：Reverse Nodes in k-Group（以k为循环节反转链表）【面试算法题】
题目: Given a linked list, reverse the nodes of a linked list k at a time and return its modified list ...
-
通过全备+binlog_server同步恢复被drop的库或表
MySQL 中drop 等高危误操作后恢复方法 实验目的: 本次实验以恢复drop操作为例,使用不同方法进行误操作的数据恢复. 方法: 利用master同步 :伪master+Binlog+同步(本文 ...
-
String基础
一: String,StringBuffer与StringBuilder的区别??String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程 ...
-
[EF]数据上下文该如何实例化？
摘要 之前使用过一段Nhibernate,最近在尝试EF做项目,但对DbContext的实例化,有点困惑,发现和Nhibernate有不同.这里将查找的例子,在这里列举一下. 资料 在EntityFr ...
-
Windows-DB2 9.7安装图解
解压后,双击 setup.exe 安装 打开后,选择"安装产品" 在安装产品中,选择"安装新产品" 点击下一步 同意软件许可协议,点击下一步 可以根据需要,选择 ...
-
Object-C-NSArray
NSArray *fruitArray=[[NSArray alloc] initWithObjects:@"apple",@"banana",@"p ...