在一个页面重复使用一个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中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
javascript实现切换td中的值
Dec 05 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
前端面试知识点目录一览
Apr 15 Javascript
react中props 的使用及进行限制的方法
Apr 28 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
详解webpack自动生成html页面
2017/06/29 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
详解Python编程中包的概念与管理
2015/10/16 Python
基于python实现学生管理系统
2018/10/17 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
python 写一个水果忍者游戏
2021/01/13 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
个人函授自我鉴定
2014/03/25 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang