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实现的简单在线计算器功能
May 11 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现推拉门效果
Oct 19 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
第五节 克隆 [5]
2006/10/09 PHP
杏林同学录(七)
2006/10/09 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
javascript测试题练习代码
2012/10/10 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
区域销售经理岗位职责
2013/12/10 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Python中的变量与常量
2021/11/11 Python