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 相关文章推荐
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
js全选按钮的实现方法
Nov 17 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
jquery 手势密码插件
Mar 17 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
laravel学习教程之存取器
2016/07/30 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javascript 常用方法总结
2009/06/03 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Python实现DDos攻击实例详解
2019/02/02 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
YUV转为jpg图像的实现
2019/12/09 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
Nike香港官网:Nike HK
2019/03/23 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
Python如何实现单例模式
2016/06/03 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
小型女装店的创业计划书
2014/01/09 职场文书
办公设备采购方案
2014/03/16 职场文书
1亿有多大教学反思
2014/05/01 职场文书
学校班班通实施方案
2014/06/11 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
资产运营委托书范本
2014/10/16 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
校运会通讯稿
2015/07/18 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android