使用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. Exploring the world of Android :: Part 2

    September 17th, 2009 by Tom van Zummeren | And I’m back! Reporting live on the glorious adventures i ...

  2. Json解析数据

    Json数据解析(重点网址推荐:www.json.org   code.google.com/   https://www.json.com/) 1:什么是Json? 2:Json数据格式的特点? 3 ...

  3. 12.Mysql存储过程和函数

    12.存储过程和函数12.1 什么是存储过程和函数存储过程和函数是事先经过编译并存储在数据库中的一段SQL语句的集合,调用存储过程和函数简化应用开发人员的工作,减少数据在数据库和应用服务器之间的传输, ...

  4. PAT 1029 旧键盘(20)(代码)

    1029 旧键盘(20)(20 分) 旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在 ...

  5. How to use bmw icom a2

    Lan Connect Operation Details 1. Connect the LAN cable to ICOM A1/ICOM A2, another side to laptop LA ...

  6. java中的内存模型

    概述 Java平台自动集成了线程以及多处理器技术,这种集成程度比Java以前诞生的计算机语言要厉害很多,该语言针对多种异构平台的平台独立性而使用的多线程技术支持也是具有开拓性的一面,有时候在开发Jav ...

  7. de4dot破解脱壳新版MaxtoCode源数组长度不足解决办法

    之前在看雪混了4年.NET破解版主,现在转战这里,发现很多人还在玩的是工具类的破解,可以说这里的人都还是皮毛啊 最近很多人问使用de4dot脱壳MaxtoCode有问题,之前写过一个教程,那是工具篇的 ...

  8. 多维数组sorted函数的用法

    对某一个位置排列 l=[[1,5,7,9],[5,10,6,11],[4,2,1,4]] newlist=sorted(l,key=lambda iterm : iterm[0],reverse=Tr ...

  9. 句子相似度_tf/idf

    import mathfrom math import isnanimport pandas as pd#结巴分词,切开之后,有分隔符def jieba_function(sent): import ...

  10. Python 递归函数 详解

    Python 递归函数 详解   在函数内调用当前函数本身的函数就是递归函数   下面是一个递归函数的实例: 第一次接触递归函数的人,都会被它调用本身而搞得晕头转向,而且看上面的函数调用,得到的结果会 ...