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 Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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
php 定界符格式引起的错误
2011/05/24 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
简单实现python数独游戏
2018/03/30 Python
python如何生成各种随机分布图
2018/08/27 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
会计工作心得体会
2014/01/13 职场文书
大学生个人自荐信
2014/02/24 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
仓库管理制度范本
2015/08/04 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书