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把获取到的input值转换成json
May 15 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
PHP7 新增常量
2021/03/09 PHP
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
利用python循环创建多个文件的方法
2018/10/25 Python
python实现图片插入文字
2019/11/26 Python
Python实现代码块儿折叠
2020/04/15 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
大学生毕业的自我评价分享
2014/01/02 职场文书
本科生就业推荐信
2014/05/19 职场文书
高中同学会活动方案
2014/08/14 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
高三复习计划
2015/01/19 职场文书
MySQL Server层四个日志的实现
2022/03/31 MySQL
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android
Hive HQL支持2种查询语句风格
2022/06/25 数据库