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+Ajax实现用户名重名实时检测
Jun 01 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jquery轮播图插件使用方法详解
Jul 31 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适配器模式介绍
2012/08/14 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python正则表达式完全指南
2017/05/25 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
贝佳斯官方网站:Borghese
2020/05/08 全球购物
电子商务专业个人的自我评价
2013/11/19 职场文书
护理实习自我鉴定
2013/12/14 职场文书
大学生演讲稿范文
2014/01/11 职场文书
高二化学教学反思
2014/01/30 职场文书
中秋晚会策划方案
2014/06/12 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
win10清理dns缓存
2022/04/19 数码科技
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers
nginx七层负载均衡配置详解
2022/07/15 Servers