JavaScript实现仿微信公众账号标签管理功能详解

功能概述与实现思路

今日完成了一项小型开发任务：模拟微信公众平台的标签添加功能，特此记录实现过程，欢迎指正。

功能说明：在人物列表中选中目标用户后，点击“打标签”按钮，即可为当前选中的用户添加新的标签。

实现思路分析如下：

首先，点击“打标签”时需获取当前被选中的用户数据，这需要遍历当前的人物列表。

其次，获取选中用户列表后，需遍历这些用户已有的标签数据，以获取他们现有的标签集合。

最后，获取系统中所有可用的标签列表，同样通过遍历方式获取。

以上为文字说明，接下来展示网页交互效果。

初始状态下，“打标签”按钮处于不可用状态，无功能响应。

当人物列表存在选中项时，“打标签”按钮变为可点击状态，点击后弹出编辑窗口，显示右侧传来的可选标签列表。

用户在弹窗中选择所需标签并确认后，系统更新当前选中用户的标签属性。

核心代码实现与逻辑解析

整体流程如上所述，以下是具体代码实现。

页面结构部分较为简单，HTML与CSS代码此处省略，重点展示核心JavaScript逻辑。

主要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循环，性能可能存在瓶颈（遵循先实现功能后优化的原则）。欢迎交流指正。

以上就是本文的全部内容，希望能为读者的学习提供参考，感谢支持。