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程序设计有所帮助。