jQuery实现动态控制页面元素的方法分析

本文实例讲述了jQuery实现动态控制页面元素的方法。分享给大家供大家参考，具体如下：

背景

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

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

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

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

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

功能说明

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

图片展示

代码

rush:js;"> //添加用户为自己常用好友 function Add(e) { var friend_id = e.id; var name = $("#" + friend_id).html(); //将要插入页面的好友HTML代码 var content = "

"; //向数据库添加，通过结果来确定界面显示 $.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",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);//恢复提示文字 }