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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
js同时按下两个方向键
Dec 01 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
javascript元素动态创建实现方法
May 13 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
xtree.js 代码
2007/03/13 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
Vue中props的使用详解
2018/06/15 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
简单了解python模块概念
2018/01/11 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
终端业务员岗位职责
2013/11/27 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
稽核岗位职责
2015/02/10 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
delete in子查询不走索引问题分析
2022/07/07 MySQL