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


Posted in jQuery onDecember 20, 2017

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

背景

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

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

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

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

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

功能说明

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

图片展示

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

代码

//添加用户为自己常用好友
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 Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jquery自定义显示消息数量
Dec 19 #jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
jquery中done和then的区别(详解)
Dec 19 #jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
You might like
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
药品采购员岗位职责
2014/02/08 职场文书
yy司仪主持词
2014/03/22 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
应聘教师求职信
2014/07/19 职场文书
刑事法律意见书
2015/06/04 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
JS的深浅复制详细
2021/10/16 Javascript
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫