今天刚刚完成了一个小功能:“仿微信公众平台的-打标签”,随笔记下欢迎纠错:

操作介绍:选择人物列表点击“打标签”按钮可实现对当前已选择的人物添加新的标签;

自己分析的实现思路:1.点击“打标签”时要“知道”那些人物被选择了~~遍历当前人物列表

          2.得到被选择人物列表后还得知道他们下面的标签都有啥~~遍历选择人物的标签列表

          3.得到当前可以使用的标签列表~~额..还是遍历得到

废话讲的有点多。。。。。。来几张图片压压惊。。。网页效果\(^o^)/~

1.加载完毕的初期“打标签”不可选没有功能。。

2.当任务列表有选择的时候可以点击“打标签”并弹窗显示可编辑的标签列表(列表内容取自右侧);

3.选择标签后确定修改当前已选择的人物的标签;

概流程就这样了。。撸代码:

基本也页面结构:

html和css大家都会的就不写啦。。。下面是主要js代码:

function addLabel (){$('.addLabel_divS_ul_s').find('li').remove();$('#addLable_btn').css({'cursor':'pointer',"background":'#fff'});$('#addLable_btn').on('click',function(){// 向隐藏ul(即弹窗里的ul)中添加li var $lis                = $('.ulLabelS>.lable_list_li_append_li>.lable_list_li_strong_2'),$addLabelDivSUlS    = $('.addLabel_divS_ul_s'),$inputAll            = $('#queryPageForm input[type="checkbox"]'),$inputLength        = $inputAll.length;//人物列表//循环已有的li列表放进备选ul中for(let i=0 ; i<$lis.length; i++){var $li                = "<li class='addLabel_divS_ul_sLi' ><input type='checkbox'/>" + $($lis[i]).text() + "</li>";        //防止多次执行函数导致的多次添加if($addLabelDivSUlS.find('li').length != $lis.length){//console.log('zhixing ');$addLabelDivSUlS.append($li);};}//循环已勾选的人物列表读取已有的标签反显到备选ul的li中(li里面的input勾选)for(let i=0; i< $inputLength; i++){//判断当前人员列表是否被勾选 勾选的添加标签if($($inputAll[i]).prop('checked')){//$length : 人物固有标签的长度var $thisLi        = $($inputAll[i]).parent('.user_list_li_div_1').siblings('.user_list_li_div_2').find('.div2_lable_ul>li');$length        = $thisLi.length;//备选标签ulfor(let j = 0; j < $length ; j ++ ){//console.log($($thisLi[j]).text());for(let k = 0; k < $addLabelDivSUlS.find('li').length ; k++){if($($thisLi[j]).text() == $($addLabelDivSUlS.find('li')[k]).text()){$($addLabelDivSUlS.find('li')[k]).find('input').prop('checked',true)}}}}};$('#addLabel_divS_wrp').show();$('#addLabel_divS').show();});
}

上面是获取备选标签和“找到”选中的人物中的标签列表并在备选标签中进行勾选,当弹窗后我们还得知道当前人物列表哪个是选中的,我们在把选中的备选标签添加到当前选中的人物上,就实现修改标签的功能了。。。。。看下面。。。。

/** 取消 确定*/
function clickBtnS (){var $addLabelDivS    = $('#addLabel_divS'),inputAll        = $('#queryPageForm input[type="checkbox"]');//确定$('.addLabel_divS_div1>.btn1').on('click',function(){var    $length            = $('.addLabel_divS_ul_s>.addLabel_divS_ul_sLi');//备选标签ul//找到勾选的li 添加当前勾选的标签 人物列表for(let i=0; i< inputAll.length; i++){//判断当前人员列表是否被勾选 勾选的添加标签if($(inputAll[i]).prop('checked')){$(inputAll[i]).parent('.user_list_li_div_1').siblings('.user_list_li_div_2').find('.div2_lable_ul').empty();//循环已选择的li for(let j = 0; j<$length.length;j ++){if($($length[j]).find('input').prop('checked')){//console.log($($length[j]).text());var $li    = "<li class='div2_lable_li'>"+ $($length[j]).text() +"</li>";$(inputAll[i]).parent('.user_list_li_div_1').siblings('.user_list_li_div_2').find('.div2_lable_ul').append($li);}}}};$('.addLabel_divS_ul_s').find('li').remove();$('#addLabel_divS_wrp').hide();$addLabelDivS.hide();});//取消$('.addLabel_divS_div1>.btn2').on('click',function(){$('.addLabel_divS_ul_s').find('li').remove();$('#addLabel_divS_wrp').hide();$addLabelDivS.hide();});
};

至此就可以实现和微信的打标签相同的效果了。。也没看微信的源码不知道人家这么写的。。自知这个实现思路for循环有点多性能肯定不好(先实现功能在优化嘛。。嘿嘿)。。求指教哦。。。

转载于:https://www.cnblogs.com/cy3664983/p/6678857.html

仿微信公众平台“打标签”功能~~~相关推荐

  1. 1 微信公众平台数据统计功能的作用是什么?

    1 微信公众平台数据统计功能的作用是什么? 1.用户消息分析 通过微信公众平台的后台提供的用户消息的数据分析来查看针对用户发送的消息的统计,包括消息发送人数.次数等分析.进而更好的管理用户,把用户进行 ...

  2. 微信公众平台原创声明功能公测 自媒体原创保护的福音

    昨日晚间微信团队发布微信公众平台面向认证的媒体类型公众号公测原创声明功能的公告,势在维护作者权益,鼓励优质内容产生.心灵鸡汤.养生贴想必你已经厌倦了,甚至都不想关注公众号了(搜狗微信搜索 不用关注公众 ...

  3. 微信公众平台数据统计功能的作用是什么?

    2013年8月29日晚,微信产品团队通过服务号"微信公众平台"发布信息,宣布"微信公众平台增加数据统计功能"."数据统计功能'"菜单分为用户 ...

  4. 开发微信公众平台的基本功能

    微信的公众平台是腾迅公司在微信的基础上新增的功能,通过这一平台,个人和企业都可以打造一个微信的公众号,并实现和特定群体的文字.图片.语音的全方位沟通.互动.微信公共平台服务分为两种号,一个是" ...

  5. 仿微信公众平台登录页面

    html源码... <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

  6. wuc-tab标签点击不了_微信公众号新增标签功能,格力被中国移动取消竞标资格,全国电子无偿献血证上线,QQ新增辣椒酱表情,这就是今天的其他大新闻!...

    今天是7月3日 农历五月十三 重要的事情说三遍 过不了几天 差评公众号就要成立五周年啦! 在 7 月 5 日当天,也就是本周日 我们会搞一波抽奖活动回馈大家 奖品多多,人人都有机会 一定要关注本周日的 ...

  7. 微信公众平台实现天气预报功能

    天气预报是一种常见的功能,我们可以在自己的微信公众号上添加这个功能. 本文的天气预报的内容是从www.webxml.com.cn拿过来的,不知道有没有限制,先将就着用.还有一种是通过webservic ...

  8. react 微信公众平台实现支付功能

    注意点 1.window.WeixinJSBridge.invoke 在编辑器里面是会报错的,请无视,要在微信上才能测试 2.支付成功后注意this指向 index.html <script s ...

  9. php微信公众点歌台,PHP实现微信公众平台音乐点播功能

    本代码实现思路: 微信提供了接口,只要数据格式满足它所给的接口的XML格式即可以发送给关注者对应的音乐 1,构造微信提供的XML格式的音乐消息 音乐的XML格式: 复制代码 代码示例: 1234567 ...

最新文章

  1. Codeforces1600数学[CodeForces - 958E1[平面几何+暴力]CodeForces - 888D [组合数+错排问题]]
  2. 浅谈2D游戏设计模式--游戏剧情设计(1)
  3. 红帽RHEL6.8离线环境下升级到RHEL7.3
  4. 两个for还是一个for?
  5. python零基础实例-零基础学习Python开发练习100题实例(1)
  6. 安装php出现 “make: *** [ext/gd/libgd/gd_jpeg.lo] Error ”
  7. halcon算子盘点:Chapter 18:元组Tuple
  8. python 直方图的绘制方法全解_python plotly绘制直方图实例详解
  9. React中的this指向问题
  10. android如何导入活动,关于android:如何将活动值传递给另一个活动(Kotlin)
  11. 作者:周宗放(1950-),男,电子科技大学经济与管理学院教授、博士生导师,风险分析与数据科学研究中心主任...
  12. js实现复制html页面
  13. Radware LP 增加线路接口操作
  14. Oracle 数据库误truncate table恢复过程
  15. 机器学习-斯坦福:学习笔记7-最优间隔分类器问题
  16. Win7下使用VFW库连接摄像头
  17. Java小开发(车辆信息管理系统)
  18. android 5.01,爱思加强版
  19. Photoshop - RGB 转 CMYK 如何不失真?
  20. ping-pong机制

热门文章

  1. 为什么 Python被Google选为TensorFlow的开发语言呢?使用 Python比C++语言进行机器学习有什么优势?
  2. 关于2016年房价的思考
  3. 图像轮廓提取关键函数
  4. centos6.8 yum mysql7_Centos6.8通过yum安装mysql5.7
  5. extjs 限制上传文件类型_如何让extjg 支持选择多文件上传
  6. 016_Vue数组数据的响应式处理
  7. 010_多表的表关系
  8. 008-SDK框架之LYWSDKPlatformManager.h
  9. log4j 打印线程号配置_log4j配置参数
  10. windoes windoes server 上安装mysql(MSI安装包安装、压缩包安装)