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 submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 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+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Python写入数据到MP3文件中的方法
2015/07/10 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
python 实现端口扫描工具
2020/12/18 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
总经理岗位职责描述
2014/02/08 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
委托证明范本
2014/11/25 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
Python实现聚类K-means算法详解
2022/07/15 Python