在一个页面重复使用一个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 数组以及json元素的添加删除
Jun 26 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
JS实现图片切换特效
Dec 23 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
substr()函数中文版
2006/10/09 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
PHP7 其他修改
2021/03/09 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
简单谈谈python中的Queue与多进程
2016/08/25 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
python3下载抖音视频的完整代码
2019/06/05 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
python实现密码强度校验
2020/03/18 Python
Python requests模块cookie实例解析
2020/04/14 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
最新的咖啡店创业计划书
2013/12/30 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
公司借条范本
2015/05/25 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Pandas数据类型之category的用法
2021/06/28 Python
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL