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 Form轻松实现文件上传
May 24 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery实现简单评论区功能
Oct 26 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
paypal即时到账php实现代码
2010/11/28 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
js 替换
2008/02/19 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python找出9个连续的空闲端口
2016/02/01 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
python绘制热力图heatmap
2020/03/23 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
2015年个人实习工作总结
2015/05/28 职场文书
党支部鉴定意见
2015/06/02 职场文书
公司的力量观后感
2015/06/05 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS