绑定弹窗事件最好的方法,原生JS和JQuery方法
使用jQuery
ui = {
$close: $('.close')
, $pop: $('.pop')
, $topopBtn: $('.topop-btn')
, $popbtnArea: $('.popbtn-area')
};
// 绑定打开弹窗
ui.$popbtnArea.on('click','.topop-btn',function(){
ui.$pop.eq($(this).index()).show();
})
// 关闭弹窗
ui.$close.on('click',function(){
ui.$pop.hide();
});
原生JS代码
ui.$pop = document.getElementsByClassName('pop');
ui.$topopBtn = document.getElementsByClassName('topop-btn');
ui.$close = document.querySelectorAll('.close');
for(var i=0;i<ui.$topopBtn.length;i++){
ui.$topopBtn[i].index = i;
}
// 打开弹窗
for(var i=0;i<ui.$topopBtn.length;i++){
ui.$topopBtn[i].onclick = function(){
ui.$pop[this.index].style.display = 'block';
}
}
// close关闭弹窗
for(var i=0;i<ui.$close.length;i++){
ui.$close[i].onclick = function(){
this.parentNode.style.display = 'none';
}
}
有错误或者更好的方法欢迎评论
绑定弹窗事件最好的方法,原生JS和JQuery方法的更多相关文章
- onload事件与ready事件的区别,原生js与jquery的区别
onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...
- JavaScript之事件委托(附原生js和jQuery代码)
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
- 原生js替换jQuery各种方法-中文版
原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...
- 【JS】怎样用原生JS实现jQuery的ready方法
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- 原生JS添加节点方法与jQuery添加节点方法的比较及总结
一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...
- 原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...
- 原生JS实现new方法、new一个对象发生的四部、new里面常用的优先级
一.js中new一个对象的过程 首先了解new做了什么,使用new关键字调用函数(new ClassA(…))的具体步骤: 1.创建一个新对象: var obj = {}; 2.设置新对象的const ...
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
随机推荐
- 移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: <form action="" ...
- mysql-mysqldump命令导出多个数据库结构(实战)
环境:windows server 2012 打开CMD命令行模式, >cd c:\Program Files\Mysql\Mysql 5.7.1\bin c:\Program Files\My ...
- hdu 1558 (线段相交+并查集) Segment set
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1558 题意是在坐标系中,当输入P(注意是大写,我当开始就wa成了小写)的时候输入一条线段的起点坐标和终点坐 ...
- JSP脚本元素(声明 %! 表达式 %= 脚本 %)
JSP脚本元素包括声明.表达式.脚本 声明(declaration):用于在JSP页面中声明合法的变量和方法.以“<%!”开始,以“%>”结束. 在JSP页面中,一个声明可以出现在任何地方 ...
- PHP5.3的编译扩展
./configure --prefix=/usr/local/php --enable-fastcgi --enable-zip --enable-fpm --enable-gd-native-tt ...
- [Hbase]Hbase章2 Hbase读写过程解析
写数据 Hbase使用memstore和storefile存储对表的更新.数据在更新时首先写入hlog和memstore,memstore中的数据是排序的,当memstore累计到一定的阀值时,就会创 ...
- 最新Dashboard设计实例、技巧和资源集锦,视觉和功能两不误,妥妥的!
Dashboard设计,尽管设计师们叫法各不相同(例如:“数据面板设计”, “控制面板设计”, “仪表盘设计”或“后台界面设计”等等).但,此类设计的最终目都是力求以最直观.最简洁的方式呈现各种信息和 ...
- Permutation Sequence LT60
The set [1,2,3,...,n] contains a total of n! unique permutations. By listing and labeling all of the ...
- so文件相关
2018-08-31 今天尝试了一下编译so文件. 最开始是按照这个博主来操作的https://blog.csdn.net/tianshuai4317618/article/details/79073 ...
- oracle 笔记DBA
1.1oracle开启归档 关闭数据库 SQL>archive log list; SQL>shutdown immediate; SQL>startup mount ; SQL&g ...