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回调方法使用示例
Jun 26 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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防注入漏洞过滤函数代码
2012/04/11 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php跨服务器访问方法小结
2015/05/12 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
jQuery中get()方法用法实例
2014/12/27 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python如何实现转换URL详解
2019/07/02 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
安全协议书范本
2014/04/21 职场文书
学生保证书
2015/01/16 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python