在一个页面重复使用一个js函数的方法详解


Posted in Javascript onDecember 26, 2016

1、给每个拥有相同行为的问题DOM节点一个相同的class类,如question,同时给不同的问题一个不同的标识ID如 id="question1" id="question2"...诸如此。

2、给类.question绑定点击事件,在触发函数里面先判断当前点击的这个类的id,即可知道你要操作的是哪一个问题,然后调用你的那个伸缩函数即可。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery加法器</title>
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<style>
div {
width: 250px;
height: 250px ;
background-color: #337ab7;
float:left;
margin: 10px;
}
</style>
</head>
<script>
$(function(){
$(".question").click(function(){
//获取问题ID
var id = $(this).attr("id");
//console.log(id)
//...执行你的函数代码
})
})
</script>
<body>
<div class="question" id="question1"></div>
<div class="question" id="question2"></div>
<div class="question" id="question3"></div>
<div class="question" id="question4"></div>
</body>
</html>

以上就是小编为大家带来的在一个页面重复使用一个js函数的方法详解全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
ajax与302响应代码测试
Oct 23 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 #Javascript
jQuery实现动态添加tr到table的方法
Dec 26 #Javascript
浅谈JavaScript的计时器对象
Dec 26 #Javascript
js模糊查询实例分享
Dec 26 #Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 #Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 #Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 #Javascript
You might like
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
报关报检委托书
2014/04/08 职场文书
宣传标语大全
2014/07/01 职场文书
六一儿童节活动总结
2014/08/27 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
2015年物业管理工作总结
2015/04/23 职场文书