在一个页面重复使用一个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入门第一课 jQuery选择符
Mar 14 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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
php5.2.0内存管理改进
2007/01/22 PHP
php循环输出数据库内容的代码
2008/05/24 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
javascript 数组排序函数
2009/08/20 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
python协程之动态添加任务的方法
2019/02/19 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
python中doctest库实例用法
2020/12/31 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
火车的故事教学反思
2014/02/11 职场文书
工程安全员岗位职责
2014/03/09 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
mysql函数全面总结
2021/11/11 MySQL