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 Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 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中的观察者模式
2010/03/24 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
node.js中的console用法总结
2014/12/15 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Python多线程的退出控制实现
2020/08/10 Python
2014年幼儿园元旦活动方案
2014/02/13 职场文书
人事文员岗位职责
2014/02/16 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
村委会换届选举方案
2014/05/03 职场文书
承诺书格式
2014/06/03 职场文书
生活部的活动方案
2014/08/19 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
教师工作证明范本
2015/06/12 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript