需求

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

用jquery(target 属性)获取并修改触发事件的DOM元素_jQuery

用jquery(target 属性)获取并修改触发事件的DOM元素_JSON_02

实现

利用jQuery的 target获取到触发该事件的dom,然后修改它

target 属性

用jquery(target 属性)获取并修改触发事件的DOM元素_HTML_03

代码:

 HTML

<div class="people-desc">
                                <div class="people-name">{$vo['nickname']}</div>
                                
                               <div class="people-state" onclick="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\" onclick=\"toFollow("+follow_user_id+")\">取消关注</div>";

                }else{
                    //失败
                    layer.msg(result.msg);
                }
            },"JSON");
    }