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拖动改变div大小
Jul 04 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jquery向后台提交数组的代码分析
Feb 20 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 采集程序 常用函数
2008/12/18 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
Exjs 入门篇
2010/04/07 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
js代码实现轮播图
2020/05/04 Javascript
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
最新远光软件笔试题面试题内容
2013/11/08 面试题
中学生班主任评语
2014/01/30 职场文书
鲜花方阵解说词
2014/02/13 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
党员政治学习材料
2014/05/14 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
优秀班组事迹材料
2014/12/24 职场文书
银行先进个人总结
2015/02/15 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
Linux安装Docker详细教程
2022/07/07 Servers