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 this关键字使用分析
Oct 21 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
Mac下安装vue
2018/04/11 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
网络编辑求职信
2014/04/30 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
教师岗位职责范本
2015/04/02 职场文书
酒店开业主持词
2015/07/02 职场文书
礼貌问候语大全
2015/11/10 职场文书
2019教师的学习计划
2019/06/25 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python