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 相关文章推荐
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 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
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
PHP常用的三种设计模式
2017/02/17 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
js中document.write的那点事
2014/12/12 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
Vue的Options用法说明
2020/08/14 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
python 爬取小说并下载的示例
2020/12/07 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
岗位竞聘演讲稿
2014/01/10 职场文书
生物科学专业自荐书
2014/06/20 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
vue使用watch监听属性变化
2022/04/30 Vue.js