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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
html中两种获取标签内的值的方法
Jun 16 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分页函数代码(简单实用型)
2010/12/02 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python实现的防DDoS脚本
2011/02/08 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
销售经理工作职责范文
2013/12/03 职场文书
企业门卫岗位职责
2013/12/12 职场文书
教师党员一句话承诺
2014/03/28 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
自我检讨书怎么写
2015/05/07 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
MySQL 数据库范式化设计理论
2022/04/22 MySQL
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js