在一个页面重复使用一个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 相关文章推荐
js 数据类型转换总结笔记
Jan 17 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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版(4)
2006/10/09 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
vue生命周期实例小结
2018/08/15 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python字符串详细介绍
2015/05/09 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Pandas中resample方法详解
2019/07/02 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
后勤人员岗位职责
2013/12/17 职场文书
教师个人剖析材料
2014/02/05 职场文书
小学生环保标语
2014/06/13 职场文书
导游词之青岛崂山
2019/12/27 职场文书