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 submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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判断并删除空目录及空子目录的方法
2015/02/11 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
实例讲解PHP表单处理
2019/02/15 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python入门基础之用户输入与模块初认识
2016/11/14 Python
详解Python if-elif-else知识点
2018/06/11 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
利用Python实现kNN算法的代码
2019/08/16 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python属于软件吗
2020/06/18 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
书法比赛获奖感言
2014/02/10 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
舞蹈专业求职信
2014/06/13 职场文书
文明城市创建标语
2014/06/16 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL