jquery获取并修改触发事件的DOM元素示例【基于target 属性】

本文实例讲述了jquery获取并修改触发事件的DOM元素。分享给大家供大家参考，具体如下：

需求

当点击关注后，改变按钮样式并显示取消关注，如图

实现

利用jQuery的 target获取到触发该事件的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常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery 查找select ,并触发事件的实现代码

    复制代码 代码如下: var count=$("#drpCity option").length; //查找城市 for(var i=0;i<count;i++){ var vTmp=$("#drpCity").get(0).options[i].value; if($.trim(vTmp)==vDpoizone){ $("#drpCity").get(0).options[i].selected = true; $("#drpC

  • jquery选择器排除某个DOM元素的方法（实例演示）

    jquery选择器众多,使用选取某个DOM的方法有很多种,如何在选取的某个元素集上面做一些排除呢?下面通过几个实例说明: 1.选择所有的img元素,排除class=phpernote的元素的个数: 复制代码 代码如下: $('img:not(.phpernote)').length();//或者$('img').not('.phpernote').length(); 2.获取id=phpernote下面所有没有class=com的li元素的个数 复制代码 代码如下: $('#phpernote

  • JQuery自动触发事件的方法

    本文实例讲述了JQuery自动触发事件的方法.分享给大家供大家参考.具体如下: 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操作.例如可以使用下面的代码来触发id为btn的按钮的click事件. $('#btn').trigger("click"); 这样,当页面加载完毕后,就会立刻输出想要的效果.也可以直接简写click(),来达到同样的效果:

  • JQuery文本改变触发事件如聚焦事件、失焦事件

    Juery中聚焦事件: 复制代码 代码如下: $("#id").focus(function(){ }); 失焦事件: 复制代码 代码如下: $("#id").blur(function(){ }); 但是文本改变事件却不能这样写: 复制代码 代码如下: $("#id").change(function(){ }); 文本改变事件可以这样写,propertychange是属性改变时触发事件 复制代码 代码如下: $("#id"

  • jquery实现按Enter键触发事件示例

    复制代码 代码如下: $(function () { document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arguments[0]; if (e && e.keyCode == 13) { //to do something; } }; });

  • jQuery实现长按按钮触发事件的方法

    jQuery实现长按按钮触发事件的方法

    本文实例讲述了jQuery实现长按按钮触发事件的方法.分享给大家供大家参考.具体分析如下: 现在手机端的快速发展,使许多手机手势需要制作到手机版的网页过程中 网上有许多长按按钮的插件,甚至仅仅是jQuery Mobile都有长按事件 但是基于种种的兼容性问题, 只使用jquery去实现长按动作,可以在手机端与电脑端保持极强的兼容性 一.基本目标 制作一个按钮,实质上一个100x100px的灰色背景的图层,长按达2s则图层里的文字从in变成out.如下图所示: 二.制作过程 代码如下: 复制代码

  • jquery实现回车键触发事件(实例讲解)

    键盘事件有3: keydown,keypress,keyup,分别是按下,按着没上抬,上抬键盘 . 正确代码为: $(document).keyup(function(event){ if(event.keyCode ==13){ $("#submit").trigger("click"); } }); 推荐:keyup,防止笔记本键盘不小心触摸到了 1.有些文档中有写成这样: $(window).keydown(function(){ ... }) XP系统IE6

  • jQuery 删除/替换DOM元素的几种方式

    删除 删除操作非常简单,直接在结果集后链式调用remove()方法即可. 例如,要删除以下html脚本中所有的a元素,直接通过 复制代码 代码如下: $('a'.remove(); 就可以做到了. 复制代码 代码如下: <h3>Anchors</h3> <a href="#" class="remove">Anchor Element</a> <a href="#">Anchor Ele

  • jquery实现输入框实时输入触发事件代码

    话不多说,请看代码 $('.aa').bind('input propertychange', function() { searchProductClassbyName(); }); function searchProductClassbyName() { 写函数内容 } 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

  • JQuery触发事件例如click

    复制代码 代码如下: $('#jquery_ulsjcuiwqljksadjaspcjxzkhl li:eq(0) a').trigger('click'); $('#bt).click();

  • jQuery如何使用自动触发事件trigger

    jQuery如何使用自动触发事件trigger

    有时候,需要通过模拟用户操作,来达到点击的效果,例如用户进入页面后 就触发click事件,而无需主动点击. 比如以下代码: <body> <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x1'">点击1</a> <a href="#" onclick="javascript:document.getE

随机推荐