在一个页面重复使用一个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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
jquery实现下载图片功能
Jul 18 jQuery
Nuxt.js实战和配置详解
Aug 05 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 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
杏林同学录(七)
2006/10/09 PHP
php下实现农历日历的代码
2007/03/07 PHP
php session应用实例 登录验证
2009/03/16 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
javascript打开word文档的方法
2014/04/16 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python打包成so文件过程解析
2019/09/28 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
秋天的雨教学反思
2014/04/27 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python