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扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jQuery treeview树形结构应用
Mar 24 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+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php生成随机数的三种方法
2014/09/10 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
python re正则表达式模块(Regular Expression)
2014/07/16 Python
说一说Python logging
2016/04/15 Python
Python 处理数据的实例详解
2017/08/10 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python斐波那契数列的计算方法
2018/09/27 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python实现批量修改文件名
2020/03/23 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
大学军训感言200字
2014/02/26 职场文书
干部选拔任用方案
2014/05/26 职场文书
化验室安全管理制度
2015/08/06 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
Java数组与堆栈相关知识总结
2021/06/29 Java/Android