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 相关文章推荐
js 文件引入实现代码
Apr 23 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
详解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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
JS中表单的使用小结
2014/01/11 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
2014年综治宣传月活动总结
2014/04/28 职场文书
村级换届选举方案
2014/05/10 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
用电申请报告范文
2015/05/18 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
SSM VUE Axios详解
2021/10/05 Vue.js
详解PyTorch模型保存与加载
2022/04/28 Python
基于docker安装zabbix的详细教程
2022/06/05 Servers