jquery中封装函数传递当前元素的方法示例


Posted in jQuery onMay 05, 2017

最近在工作中遇到一个问题,需要对页面上一组元素进行ajax操作,结构如下:

<div id="aid"></div> 

<div id="aid"></div> 

<div id="aid"></div> 

<div id="aid"></div> 

<div id="stop">Stop here</div> 

<div id="aid"></div> 

<div id="aid"></div> 

<div id="aid"></div>

编写遍历函数

function a() {

      $('div').each(function () {

        var that = $(this);

        var id = that.attr('id');

        b(id, that)

      })

    }

首先执行函数 a()  遍历每个元素,然后执行b() 函数进行ajax

function b(aId,that) {

      $.ajax({

        url: 'ajaxHandler.ashx',

        data: { aid: aid },

        dataType: 'text',

        type: 'post',

        async: true,

        success: function (data) {

          var content = '';

          if (data == 'true') {

            content = "正确";

          } else {

            content = "错误";

          }

          that.html(content);

        }

      })

    }

根据返回值 对点击的元素赋予不同的值

因为html元素有部分样式一样,所有没有办法根据 $("#id").html("赋值"); 进行赋值

这儿使用this,将返回值赋予当前点击的元素

因为该页面函数发生嵌套,所以需要传递当前元素,

但由于种种原因,到最后可能很难使用this,仍然取到正确的当前元素,所以,可以使用一个变量来存储this:

var that = $(this);然后在使用就可以了

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 #jQuery
jQuery树插件zTree使用方法详解
May 02 #jQuery
jQuery Tree Multiselect使用详解
May 02 #jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 #jQuery
jQuery实现按比例缩放图片的方法
Apr 29 #jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 #jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 #jQuery
You might like
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP常用处理静态操作类
2015/04/03 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
计算机网络专业求职信
2014/06/05 职场文书
活动总结新闻稿
2014/08/30 职场文书
政工师工作总结2015
2015/05/26 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
golang特有程序结构入门教程
2021/06/02 Python
SQL SERVER触发器详解
2022/02/24 SQL Server
Python requests用法和django后台处理详解
2022/03/19 Python
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
Hive日期格式转换方法总结
2022/06/25 数据库