在一个页面重复使用一个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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
vue 登录滑动验证实现代码
Aug 24 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
如何使用原生Js实现随机点名详解
Jan 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
色色整理的PHP面试题集锦
2012/03/08 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
在Python的Django框架中包装视图函数
2015/07/20 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
SQL语言面试题
2013/08/27 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
内容编辑个人求职信
2013/12/10 职场文书
银行开业庆典方案
2014/02/06 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
五五普法心得体会
2014/09/04 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
体育教师个人工作总结
2015/02/09 职场文书
测量员岗位职责
2015/02/14 职场文书
志愿者个人总结
2015/03/03 职场文书
法制主题班会教案
2015/08/13 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android