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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 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中使用灵巧的体系结构
2006/10/09 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
php自定义分页类完整实例
2015/12/25 PHP
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
jqTransform美化表单
2015/10/10 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
python求解数组中两个字符串的最小距离
2018/09/27 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
数控技术应用个人求职信范文
2014/02/03 职场文书
丧事主持词大全
2014/04/02 职场文书
报到证办理个人委托书
2014/10/06 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
教师网络培训心得体会
2016/01/09 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android