在一个页面重复使用一个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 相关文章推荐
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
javascript中的事件代理初探
Mar 08 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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
MySQL授权问题总结
2007/05/06 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php存储过程调用实例代码
2013/02/03 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
一个JS翻页效果
2007/07/23 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
python opencv进行图像拼接
2020/03/27 Python
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
八一慰问活动方案
2014/02/07 职场文书
法人授权委托书范本
2014/04/04 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书