js仿微信公眾平臺(tái)打標(biāo)簽功能

更新時(shí)間：2017年04月08日 08:57:57 作者：孫大陽

這篇文章主要為大家詳細(xì)介紹了js仿微信公眾平臺(tái)打標(biāo)簽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天剛剛完成了一個(gè)小功能：“仿微信公眾平臺(tái)的-打標(biāo)簽”，隨筆記下歡迎糾錯(cuò)：

操作介紹：選擇人物列表點(diǎn)擊“打標(biāo)簽”按鈕可實(shí)現(xiàn)對當(dāng)前已選擇的人物添加新的標(biāo)簽；

自己分析的實(shí)現(xiàn)思路：

1.點(diǎn)擊“打標(biāo)簽”時(shí)要“知道”那些人物被選擇了~~遍歷當(dāng)前人物列表　　　　　　　　　　

2.得到被選擇人物列表后還得知道他們下面的標(biāo)簽都有啥~~遍歷選擇人物的標(biāo)簽列表　　　　　　　　　

3.得到當(dāng)前可以使用的標(biāo)簽列表~~額..還是遍歷得到

廢話講的有點(diǎn)多。來幾張圖片壓壓驚。網(wǎng)頁效果\(^o^)/~

1.加載完畢的初期“打標(biāo)簽”不可選沒有功能。。

2.當(dāng)任務(wù)列表有選擇的時(shí)候可以點(diǎn)擊“打標(biāo)簽”并彈窗顯示可編輯的標(biāo)簽列表（列表內(nèi)容取自右側(cè)）；

3.選擇標(biāo)簽后確定修改當(dāng)前已選擇的人物的標(biāo)簽；

概流程就這樣了，代碼：

基本也頁面結(jié)構(gòu)：

html和css大家都會(huì)的就不寫啦。。。下面是主要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;//人物列表
  
  //循環(huán)已有的li列表放進(jìn)備選ul中
  for(let i=0 ; i<$lis.length; i++){
   var $li    = "<li class='addLabel_divS_ul_sLi' ><input type='checkbox'/>" + $($lis[i]).text() + "</li>";
　　　　　　　　//防止多次執(zhí)行函數(shù)導(dǎo)致的多次添加
   if($addLabelDivSUlS.find('li').length != $lis.length){
    //console.log('zhixing ');
    $addLabelDivSUlS.append($li);
   };
  }
  
  //循環(huán)已勾選的人物列表讀取已有的標(biāo)簽反顯到備選ul的li中（li里面的input勾選）
  for(let i=0; i< $inputLength; i++){
   
   //判斷當(dāng)前人員列表是否被勾選 勾選的添加標(biāo)簽
   if($($inputAll[i]).prop('checked')){
    //$length : 人物固有標(biāo)簽的長度
    var $thisLi  = $($inputAll[i]).parent('.user_list_li_div_1').siblings('.user_list_li_div_2').find('.div2_lable_ul>li');
     $length  = $thisLi.length;//備選標(biāo)簽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();
 });
}

上面是獲取備選標(biāo)簽和“找到”選中的人物中的標(biāo)簽列表并在備選標(biāo)簽中進(jìn)行勾選，當(dāng)彈窗后我們還得知道當(dāng)前人物列表哪個(gè)是選中的，我們在把選中的備選標(biāo)簽添加到當(dāng)前選中的人物上，就實(shí)現(xiàn)修改標(biāo)簽的功能了。。。。?？聪旅?。。。。

/*
 * 取消 確定
 */
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');//備選標(biāo)簽ul
 
  //找到勾選的li 添加當(dāng)前勾選的標(biāo)簽 人物列表
  for(let i=0; i< inputAll.length; i++){
   
   //判斷當(dāng)前人員列表是否被勾選 勾選的添加標(biāo)簽
   if($(inputAll[i]).prop('checked')){
    $(inputAll[i]).parent('.user_list_li_div_1').siblings('.user_list_li_div_2').find('.div2_lable_ul').empty();
    //循環(huán)已選擇的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();
 });
};

至此就可以實(shí)現(xiàn)和微信的打標(biāo)簽相同的效果了。。也沒看微信的源碼不知道人家這么寫的。。自知這個(gè)實(shí)現(xiàn)思路for循環(huán)有點(diǎn)多性能肯定不好（先實(shí)現(xiàn)功能在優(yōu)化嘛。。嘿嘿）。。求指教哦。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: