js仿微信公众平台打标签功能


Posted in Javascript onApril 08, 2017

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

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

自己分析的实现思路

1.点击“打标签”时要“知道”那些人物被选择了~~遍历当前人物列表

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

 

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

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

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

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

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

js仿微信公众平台打标签功能js仿微信公众平台打标签功能js仿微信公众平台打标签功能

概流程就这样了,代码

基本也页面结构:

js仿微信公众平台打标签功能

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;//备选标签ul
    
    for(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循环有点多性能肯定不好(先实现功能在优化嘛。。嘿嘿)。。求指教哦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 #Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 #Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 #Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 #Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 #Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 #Javascript
js实现图片加载淡入淡出效果
Apr 07 #Javascript
You might like
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
preg_match_all使用心得分享
2014/01/31 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
js实现tab切换效果
2017/02/16 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
北京大学自荐信范文
2014/01/28 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
同学会邀请函模板
2015/01/30 职场文书
阿凡达观后感
2015/06/10 职场文书
第一军规观后感
2015/06/12 职场文书