在一个页面重复使用一个js函数的方法详解
2019/6/27 21:32:23
本文主要是介绍在一个页面重复使用一个js函数的方法详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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函数的方法详解全部内容了,希望大家多多支持找一找教程网~
这篇关于在一个页面重复使用一个js函数的方法详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-27Ant Design Vue入门指南:轻松搭建美观界面
- 2024-11-27Vue3项目实战:从零开始的完整指南
- 2024-11-27Vue CLI多环境配置资料详解
- 2024-11-27Vue3+Vite资料:新手入门教程
- 2024-11-27Vue3阿里系UI组件资料入门教程
- 2024-11-27如何集成Ant Design Vue的图标资料
- 2024-11-27如何集成Ant Design Vue图标资料
- 2024-11-27Vue CLI多环境配置资料:新手教程
- 2024-11-27Vue3的阿里系UI组件资料入门指南
- 2024-11-27Vue3公共组件资料详解与实战教程