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插件imgAreaSelect基础讲解
May 26 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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操作数组相关函数
2011/02/03 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
php商品对比功能代码分享
2015/09/24 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
php简单截取字符串代码示例
2016/10/19 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python 实现随机数详解及实例代码
2017/04/15 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python逆向入门教程
2018/01/15 Python
python os模块简单应用示例
2019/05/23 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Python JSON编解码方式原理详解
2020/01/20 Python
绩效考核实施方案
2014/03/18 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
地心历险记观后感
2015/06/15 职场文书
行政处罚决定书
2015/06/24 职场文书
标枪加油稿
2015/07/22 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python