在一个页面重复使用一个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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
JavaScript中this详解
Sep 01 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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 Socket 编程
2010/04/09 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
offsetParent 算法分析
2010/04/05 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
Django中的Signal代码详解
2018/02/05 Python
Python错误处理操作示例
2018/07/18 Python
浅谈Python的list中的选取范围
2018/11/12 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
德语专业求职信
2014/03/12 职场文书
升旗仪式主持词
2014/03/19 职场文书
2014年母亲节寄语
2014/05/07 职场文书
环保倡议书400字
2014/05/15 职场文书
影子教师研修方案
2014/06/14 职场文书
家具商场的活动方案
2014/08/16 职场文书
2014年仓库工作总结
2014/11/20 职场文书
自主招生自荐信格式
2015/03/04 职场文书