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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 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查看session内容的函数
2008/08/27 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
电子专业推荐信范文
2013/11/18 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
高中生的自我评价
2014/03/04 职场文书
房屋委托书范本
2014/04/04 职场文书
分公司任命书
2014/06/06 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
Hive常用日期格式转换语法
2022/06/25 数据库