在一个页面重复使用一个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中对数组的操作代码
Aug 12 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
javascript基本算法汇总
Mar 09 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
vue中英文切换实例代码
Jan 21 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
PHP实现微信对账单处理
2018/10/01 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python中的pass语句使用方法讲解
2015/05/14 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
python 怎样进行内存管理
2020/11/10 Python
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
房地产项目建议书
2014/03/12 职场文书
爱护公物标语
2014/06/24 职场文书
初中教师个人总结
2015/02/10 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
交通事故起诉书
2015/05/19 职场文书