本文介绍使用jQuery动态管理页面好友列表的方法。通过分类显示用户列表，点击添加好友并实时显示；支持仿手机端的删除模式，通过切换onclick事件实现正常与删除状态的交互。结合Ajax与后台交互，完成好友的增删改查及界面状态切换，提升用户体验。
jQuery动态控制页面元素实现方案
本文详细介绍利用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对页面元素属性进行动态控制
最后需要强调的是，当面临真实的项目需求驱动时，开发者会进行大量的实践，从而掌握更多的技能与技巧。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述内容能对大家的jQuery程序设计工作有所帮助。