jquery获取并修改触发事件的DOM元素示例【基于target 属性】


Posted in jQuery onOctober 10, 2019

本文实例讲述了jquery获取并修改触发事件的DOM元素。分享给大家供大家参考,具体如下:

需求

当点击关注后,改变按钮样式并显示取消关注,如图

 jquery获取并修改触发事件的DOM元素示例【基于target 属性】

 jquery获取并修改触发事件的DOM元素示例【基于target 属性】

实现

利用jQuery的 target获取到触发该事件的dom,然后修改它

target 属性

jquery获取并修改触发事件的DOM元素示例【基于target 属性】

代码:

HTML

<div class="people-desc">
<div class="people-name">{$vo['nickname']}</div>
<div class="people-state" οnclick="toFollow({$vo['follow_user_id']})">+关注</div>
</div>
function toFollow(follow_user_id) {
    console.log(event);
    var toUrl = "{:url('index/follow/toFollow')}";
    var postData = {follow_user_id:follow_user_id};
    $.post(
      toUrl,
      postData,
      function (result) {
        if(result.code == 0){
          target.outerHTML = "<div class=\"people-state active\" οnclick=\"toFollow("+follow_user_id+")\">取消关注</div>";
        }else{
          //失败
          layer.msg(result.msg);
        }
      },"JSON");
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 #jQuery
jQuery 筛选器简单操作示例
Oct 02 #jQuery
jQuery 查找元素操作实例小结
Oct 02 #jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 #jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 #jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 #jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 #jQuery
You might like
php.ini中date.timezone设置分析
2011/07/29 PHP
php实现水仙花数示例分享
2014/04/03 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
Python 文件操作实现代码
2009/10/07 Python
Python 列表(List)操作方法详解
2014/03/11 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
毕业设计说明书
2014/05/07 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
2014年法院工作总结
2014/11/24 职场文书
活动简报范文
2015/07/22 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
python xlwt模块的使用解析
2021/04/13 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js