欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js仿微信公众平台打标签功能

程序员文章站 2022-07-06 12:38:59
今天刚刚完成了一个小功能:“仿微信公众平台的-打标签”,随笔记下欢迎纠错: 操作介绍:选择人物列表点击“打标签”按钮可实现对当前已选择的人物添加新的标签; 自己分析的实...

今天刚刚完成了一个小功能:“仿微信公众平台的-打标签”,随笔记下欢迎纠错:

操作介绍:选择人物列表点击“打标签”按钮可实现对当前已选择的人物添加新的标签;

自己分析的实现思路

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循环有点多性能肯定不好(先实现功能在优化嘛。。嘿嘿)。。求指教哦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。