使用jQuery

  1. ui = {
  2. $close: $('.close')
  3. , $pop: $('.pop')
  4. , $topopBtn: $('.topop-btn')
  5. , $popbtnArea: $('.popbtn-area')
  6. };
  7. // 绑定打开弹窗
  8. ui.$popbtnArea.on('click','.topop-btn',function(){
  9. ui.$pop.eq($(this).index()).show();
  10. })
  11. // 关闭弹窗
  12. ui.$close.on('click',function(){
  13. ui.$pop.hide();
  14. });

原生JS代码

  1. ui.$pop = document.getElementsByClassName('pop');
  2. ui.$topopBtn = document.getElementsByClassName('topop-btn');
  3. ui.$close = document.querySelectorAll('.close');
  4.  
  5. for(var i=0;i<ui.$topopBtn.length;i++){
  6. ui.$topopBtn[i].index = i;
  7. }
  8. // 打开弹窗
  9. for(var i=0;i<ui.$topopBtn.length;i++){
  10. ui.$topopBtn[i].onclick = function(){
  11. ui.$pop[this.index].style.display = 'block';
  12. }
  13. }
  14. // close关闭弹窗
  15. for(var i=0;i<ui.$close.length;i++){
  16. ui.$close[i].onclick = function(){
  17. this.parentNode.style.display = 'none';
  18. }
  19. }

有错误或者更好的方法欢迎评论

绑定弹窗事件最好的方法,原生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. sql backup

    create or replace procedure P_updateasbegin update security_price p set p.closing_price = (select MI ...

  2. DevExpress之TreeList节点绑定图片

    最近在项目中使用到了DX中的TreeList控件绑定数据源时在每个节点前显示特点的图片:查阅相关资料实现方法如下:1.首先打开VS2010新建一个WINFROM应用程序: 2.在WINFROM应用程序 ...

  3. 2Q - Fibbonacci Number

    Your objective for this question is to develop a program which will generate a fibbonacci number. Th ...

  4. Jenkins2.0中的pipeline

    jenkins的实现是标准的master/slave模式,用户与master交互,master将job分布到slave上运行. jenkins的基本概念: 1. master, 也就是jenkins的 ...

  5. 采用JavaMelody监控Tomcat服务——安装手册

    #1.获取安装包 .zip mv probe.war <tomcat dir>/webapps #3.设置tomcat用户信息 vi <tomcat dir>/conf/tom ...

  6. Delphi,C语言互通脚本引擎研究

    基于大神akuma的脚本引擎. 下面是demo

  7. php mysql 丢失更新

    php mysql 丢失更新问题,搜索整个互联网,很少有讲到,也许和php程序员出身一般都是非科班出身有关系吧. 另外php程序一般都是简单数据,很少有并发一致性问题,所以大家都没有谁专门提出这个问题 ...

  8. python 正则表达式 group() groups()

    参考地址: http://www.cnblogs.com/kaituorensheng/archive/2012/08/20/2648209.html

  9. hook api实现

    https://www.cnblogs.com/findumars/p/8734116.html https://blog.csdn.net/lonelyrains/article/details/2 ...

  10. Python Numpy中transpose()函数的使用

    在Numpy对矩阵的转置中,我们可以用transpose()函数来处理. 这个函数的运行是非常反常理的,可能会令人陷入思维误区. 假设有这样那个一个三维数组(2*4*2): array ([[[ 0, ...