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设置图片等比例缩小的方法
Apr 29 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery操作动画完整实例分析
Jan 10 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 魔术函数使用说明
2010/02/21 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP实现的json类实例
2015/07/28 PHP
php实现购物车功能(下)
2016/01/05 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
如何把python项目部署到linux服务器
2020/08/26 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
初中考试作弊检讨书
2014/02/01 职场文书
食品安全处置方案
2014/06/14 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫