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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 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
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php计算整个目录大小的方法
2015/06/19 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
js实现点赞效果
2020/03/16 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
python中MethodType方法介绍与使用示例
2017/08/03 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
低碳生活倡议书
2014/04/14 职场文书
三字经教学反思
2014/04/26 职场文书
总经理助理岗位职责
2015/01/31 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python