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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
Jquery Fade用法详解
Nov 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 中的输出缓冲
2006/12/21 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python实现快速多线程ping的方法
2015/07/15 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python装饰器的特性原理详解
2019/12/25 Python
Python调用.NET库的方法步骤
2019/12/27 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
中学教师请假制度
2014/02/03 职场文书
社会实践的活动方案
2014/08/22 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
中学后勤工作总结2015
2015/07/22 职场文书