在一个页面重复使用一个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-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
angular+webpack2实战例子
May 23 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
JavaScript实现雪花飘落效果
Dec 27 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
新浪SAE搭建PHP项目教程
2015/01/28 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
简单学习vue指令directive
2016/11/03 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
layui实现数据分页功能
2019/07/27 Javascript
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
小学三年级学生评语
2014/04/22 职场文书
机械系毕业生求职信
2014/05/28 职场文书
国庆宣传标语
2014/06/30 职场文书
学雷锋日活动总结
2015/02/06 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
小学一年级数学教学反思
2016/02/16 职场文书