【JQuery】动态控制页面元素

背景

最近做了一个小系统，其中需要在页面对用户的好友进行增删改查。本来没有那么复杂，用表格形式就可以相对容易的实现。

但是考虑到用户的体验度，首先添加尽量不想用输入，就采用将所有用户分类显示，然后点击即可添加。

添加的用户同时在界面显示，显示出用户当前的好友。同时点击已经添加好的好友可进行下一部的业务操作。

当然，删除的操作是仿照手机端那样，右上角有一个红色的“x”，点击该好友即可删除。

最后界面还能退出删除的模式，恢复正常的模式。

---

功能说明

1. 添加用户：在列表中点击即添加用户，同时添加onclick事件
2. 删除用户：点击该好友即可删除
3. 进入删除模式：将界面改为删除模式，切换onclick事件
4. 恢复正常模式：将界面改为正常模式，切换onclick事件

---

图片展示

---

代码

    //添加用户为自己常用好友    function Add(e) {        var friend_id = e.id;        var name = $("#" + friend_id).html();        //将要插入页面的好友html代码        var content = "<div id=\"friend" + friend_id + "\" class=\"case-item\" onclick=\"" + game_type + "(this)\"><div class=\"ih-item circle effect1\"><a href=\"#\"><img class=\"img_wrong\" src=\"image/wrong.png\" style=\"float: right; width: 15px; height: 15px;display:none\" /><div class=\"spinner\"></div><div class=\"img\"><h3 id=\"" + friend_id + "\">" + name + "</h3></div><div class=\"info\"><div class=\"info-back\"><h3 class=\"info-word\">" + info_word + "</h3></div></div></a></div></div>";        //向数据库添加，通过结果来确定界面显示        $.ajax({            url: "userlist.aspx/AddFriend",            data: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}",            type: 'Post',            contentType: "application/json; charset=utf-8",            dataType: "json",            success: function (result) {                if (result.d == "true") {                    $(".case-content").append(content);//数据库添加成功，插入html代码                }                else {                    alert(result.d);                }            },            error: function (err) {                alert("未知错误");            }        });    }    //删除好友    function Delete(e) {        var friend_id = e.id;        $.ajax({            url: "userlist.aspx/DeleteFriend",            data: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}",            type: 'Post',            contentType: "application/json; charset=utf-8",            dataType: "json",            success: function (result) {                if (result.d == true) {                    $("#" + friend_id).remove();//在界面移除好友                }                if (result.d == false) { alert("删除失败"); }            },            error: function (err) {                alert("未知错误");            }        });    }    //重置好友-切换到删除模式    function ChangeToDelete() {        $(".case-item").removeAttr("onclick");//删除onclick事件        $(".case-item").attr("onclick", "Delete(this);");//添加新的onclick事件        $(".img_wrong").css("display", "block");//使删除图标可见        $(".info-word").html("删除");//改变提示文字    }    //关闭重置-切换到正常模式    function ChangeToNormal() {        $(".case-item").removeAttr("onclick");//删除onclick事件        $(".case-item").attr("onclick", "");//添加新的onclick事件        $(".img_wrong").css("display", "none");//使删除图标不可见        $(".info-word").html(info_back);//恢复提示文字    }

---

小结

这次练习学到的内容有两点：
1. Ajax和后台的交互； 2. JQuery对页面元素的属性控制

最后想说的是，真正有个需求驱动你的时候，你会实践很多，学到很多。