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程序设计有所帮助。
您可能感兴趣的文章:
- jQuery页面元素动态添加后绑定事件丢失方法,非 live
- jQuery动态创建html元素的常用方法汇总
- jQuery动态添加的元素绑定事件处理函数代码
- jQuery获取动态生成的元素示例
- jquery 动态创建元素的方式介绍及应用
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
- jQuery 绑定事件到动态创建的元素上的方法实例
- jquery动态添加元素事件失效问题解决方法
- jQuery动态添加、删除元素的方法
- Jquery动态添加及删除页面节点元素示例代码
- JQuery动态创建DOM、表单元素的实现代码
- jQuery on()绑定动态元素出现的问题小结
赞 (0)