绑定弹窗事件最好的方法,原生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这样的库必须要兼容各种浏览器和低版本和许 ...
随机推荐
- Could not load file or assembly 'System.Net.Http, Version=4.2.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. The located assembly's manifest definition does not mat
Could not load file or assembly 'System.Net.Http, Version=4.2.0.0, Culture=neutral, PublicKeyToken=b ...
- jqPaginator分页(每次只取一页数据)
应用技术点:jqPaginator.template7.bootstrap.css 参考网址: jqPaginator:http://jqpaginator.keenwon.com/#a3 templ ...
- 11.1JS笔记
1.js的数据类型分为基本和引用,基本(string.undefined.null.number,boolean),引用(object-->array.function.json等) 2.基本数 ...
- Win7自带功能,刻录光盘遇到的问题
Win7系统的可以使用系统自带有光盘刻录功能来刻录光盘. 把一张空白光盘放入刻录机,打开“计算机”窗口,双击刻录机图标,弹出“刻录光盘”对话框,选择刻录类型.这里有两个选项:一个是“类似于USB闪存驱 ...
- L1-025 正整数A+B(15)(思路+测试点分析)
L1-025 正整数A+B(15 分) 题的目标很简单,就是求两个正整数A和B的和,其中A和B都在区间[1,1000].稍微有点麻烦的是,输入并不保证是两个正整数. 输入格式: 输入在一行给出A和B, ...
- andorid 进度条和图片的透明度
layout.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...
- git-flow 备忘清单
原文地址:http://danielkummer.github.io/git-flow-cheatsheet/index.zh_CN.html
- Executors提供的四种线程池
Java 5+中的Executor接口定义一个执行线程的工具.它的子类型即线程池接口是ExecutorService.要配置一个线程池是比较复杂的,尤其是对于线程池的原理不是很清楚的情况下,因此在工具 ...
- CH#17C 舞动的夜晚
原题链接 即求二分图的不可行边数量,因为不保证是完备匹配,所以需要通过网络流求出任意一组最大匹配,并建立新图判断. 建新图:对于跑完网络流的图上已经匹配的边,建立反边:对于没有匹配的边,建立正边(图只 ...
- .net序列化
在开发过程中,会遇到很多需要使用序列化的场景,比如wcf,webservice或者jquery+.net等.那今天就说说我对序列化的理解. 在.net中有几种序列化的方式,XML.二进制.SOAP.还 ...