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(); });};