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.Pin垂直滚动时固定导航
May 24 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
简单了解Python生成器是什么
2019/07/02 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python 使用多属性来进行排序
2019/09/01 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
python剪切视频与合并视频的实现
2020/03/03 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
什么是类的返射机制
2016/02/06 面试题
大学生文员专业个人求职信范文
2014/01/05 职场文书
迟到检讨书大全
2014/01/25 职场文书
企业员工薪酬方案
2014/06/04 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
法院执行局工作总结
2015/08/11 职场文书
科级干部培训心得体会
2016/01/06 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis
vue打包时去掉所有的console.log
2022/04/10 Vue.js