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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery操作之效果详解
May 19 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 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
海贼王:最美的悬赏令!
2020/03/02 日漫
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
Python字符遍历的艺术
2008/09/06 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
网络研修随笔感言
2014/02/17 职场文书
小学毕业寄语大全
2014/04/03 职场文书
车辆转让协议书
2014/04/15 职场文书
应届生自荐信
2014/06/30 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
校友会致辞
2015/07/30 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL