在一个页面重复使用一个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 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php学习之简单计算器实现代码
2011/06/09 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php实现的操作excel类详解
2016/01/15 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
基于python实现删除指定文件类型
2020/07/21 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
报效祖国演讲稿
2014/09/15 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
科级干部培训心得体会
2016/01/06 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang