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实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现带进度条的轮播图
Sep 13 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
isset和empty的区别
2007/01/15 PHP
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
详解Python中for循环是如何工作的
2017/06/30 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python里运用私有属性和方法总结
2019/07/08 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
生物技术研究生自荐信
2013/11/12 职场文书
工作表现评语
2014/01/19 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书