在一个页面重复使用一个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的原理和实现技巧介绍
Nov 08 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
JavaScript数组方法总结分析
May 06 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
原生js开发的日历插件
Feb 04 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
seajs下require书写约定实例分析
May 16 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
学习php分页代码实例
2013/10/24 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
python创建线程示例
2014/05/06 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
气象学专业个人求职信
2014/04/22 职场文书
2014中考励志标语
2014/06/05 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
2014国庆节标语口号
2014/09/19 职场文书
2014年食堂工作总结
2014/11/20 职场文书