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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery实现简单评论功能
Aug 19 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中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
实时获取Python的print输出流方法
2019/01/07 Python
对python字典过滤条件的实例详解
2019/01/22 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
考试没考好检讨书
2014/01/31 职场文书
机械机修工岗位职责
2014/08/03 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
天坛导游词
2015/02/02 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
女性励志书籍推荐
2019/08/19 职场文书