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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jquery插件实现搜索历史
Apr 24 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python 多线程串行和并行的实例
2019/02/22 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python实现微信好友的数据分析
2019/12/16 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
高中军训广播稿
2014/01/14 职场文书
五年级科学教学反思
2014/02/05 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
自我检讨报告
2015/01/28 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
会计做账心得体会
2016/01/22 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
业余无线电通联Q语
2022/02/18 无线电
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis