使用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方法的更多相关文章

  1. onload事件与ready事件的区别,原生js与jquery的区别

    onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...

  2. JavaScript之事件委托(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...

  3. 原生js替换jQuery各种方法-中文版

    原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...

  4. 【JS】怎样用原生JS实现jQuery的ready方法

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...

  5. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  6. 原生JS添加节点方法与jQuery添加节点方法的比较及总结

    一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...

  7. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  8. 原生JS实现new方法、new一个对象发生的四部、new里面常用的优先级

    一.js中new一个对象的过程 首先了解new做了什么,使用new关键字调用函数(new ClassA(…))的具体步骤: 1.创建一个新对象: var obj = {}; 2.设置新对象的const ...

  9. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

随机推荐

  1. pyton random 模块

    import random print(random.random())#(0,1)----float 大于0且小于1之间的小数 print(random.randint(1,3)) #[1,3] 大 ...

  2. windbg 加载dump监测蓝屏原因时出现重复的星星框提示解决办法

    加载dump文件出现了重复上边的信息 总结: 要reload一下环境,说明符号库未加载出现的错误,!sym noisy 显示详细信息 ,reload重载符号库,未找到的,从服务器进行下载, 注意,第一 ...

  3. linux使用笔记4

    运行已经安装好的软件: cd到这个软件的安装目录 输入命令/:./软件名称 就可以了 运行geoserver 1.首先需要添加JAVA_HOME的环境变量: 在服务器没有设置JAVA_HOME的情况下 ...

  4. Porsche PIWIS TESTER III

    Allscanner VXDIAG Porsche Piwis III with Lenovo T440P Laptop  Porsche Piwis tester III V37.250.020 N ...

  5. POJ2728 Desert King

    一道生成树+\(0/1\)分数规划 原题链接 设每条边的距离为\(dis[x]\),两点高度差为\(h[x]\),该图的生成树为\(T\),则题目实际求的就是\(\dfrac{\sum\limits_ ...

  6. python爬虫_简单使用百度OCR解析验证码

    百度技术文档 首先要注册百度云账号: 在首页,找到图像识别,创建应用,选择相应的功能,创建 安装接口模块: pip install baidu-aip 简单识别一: 简单图形验证码: 图片: from ...

  7. tp5查看版本

    5.0 base.php 5.1 echo \think\facade\App::version();//用这行代码查看版本

  8. SVN 钩子 同步测试服务器

    http://blog.csdn.net/showso2006/article/details/6750441 多人开始使用subversion之后,就想着,要建立一个测试用的服务器,不需要把文件up ...

  9. 最全面!2019年最新UX设计趋势预测合集

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 追逐潮流是每个行业都必做的一件事,对于直接影响数字产品定位和用户感知方式的UX设计也是如此. 不论你 ...

  10. oracle使用3DES加密

    CREATE OR REPLACE PACKAGE dbc_cryptor IS SYSKEY VARCHAR2(16) := '0000000012345678'; SYSIV VARCHAR2(1 ...