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

今天刚完成一个小功能：“模仿微信公众平台——标注”，写下欢迎指正：

操作介绍：选中人员列表，点击“标签”按钮，为当前选中的人员添加新的标签；

想法实现的自我分析：

1.点击“标签”以“知道”那些字符被选中~ ~遍历当前字符列表

2.得到选中字符的列表后，你一定也知道下面的标签很别扭~ ~遍历选中字符的标签列表

3.获取目前可以使用的标签列表~ ~金额.或者穿越它。

废话真多。我们拍几张照片冷静一下。网页效果\ (o)/~

1.加载初始阶段的“标记”是可选的，没有任何功能。

2.选择任务列表后，可以点击“标签”，弹出可编辑的标签列表(列表内容取自右侧)；

3.选择标签后，确认修改当前选中人员的标签；

几乎整个过程是这样的，代码：

基本页面结构：

每个人都知道html和css，所以不要写。以下是主要的js代码：

函数addLabel (){ $('。add label _ DIvS _ ul _ s’)。查找(' li ')。移除()；$(' # addable _ BTN ')。css({'cursor':'pointer '，' background ' : ' # fff ' })；$(' # ADDABLE _ BTN ')。ON ('click '，function(){//Add livar $ lis=$(. ulla bels . LABLE _ LIT _ LI _ APPEND _ LI)。LABLE _ LIST _ LI _ STRONG _)到隐藏的ul $addLabelDivSUlS=$('。addLabel_divS_ul_s ')，$ input all=$(' # queryPageForm input[type=' checkbox ']')，$ input length=$ input tall . length；//人员列表//将现有li列表放入替代ul for(让I=0；i $ lis.lengthI){ var $ Li=' Li class=' addLabel _ divS _ ul _ SlI '输入类型='checkbox'/' $($lis[i])。text()'/Li '；//防止添加if ($ addlabeldivresults)。查找(' li ')。长度！=$ lis . length){//console . log(' zhi xing ')；$ addlabeldivsuls . append($ Li)；};}//回收已勾选的人员列表，读取现有标签，并显示在替代ul的li中(li中的输入已勾选)(让I=0；i $ inputLengthI ){ //确定当前人员列表是否勾选。添加一个标签if($($ input tall[I])。prop(' checked '){//$ Length :人固有标签的长度var $ this Li=$($ input tall[I])。父代('。user _ list _ Li _ div _ 1’)。兄弟姐妹('。user _ list _ Li _ div _ 2’)。find(' . div 2 _ label _ ulli ')；$ length=$ thisLi.length//ul的替代标签(让j=0；j美元长度；j ){ //console.log($($thisLi[j])。text())；for(设k=0；k $ addlabelsidvsuls . find(' Li ')。长度；k ){ if($($thisLi[j])。text()===$($ addlabeldivsuls . find(' Li ')[k])。text()){ $($ addlabeldivsuls . find(' Li ')[k])。查找('输入')。prop('checked '，true)} } } } }；$('#addLabel_divS_wrp ')。show()；$('#addLabel_divS ')。show()；});}以上是获取备选标签，在选中的字符中“找到”标签列表，并在备选标签中勾选。弹出后，我们要知道当前角色列表中选择了哪一个。我们可以通过将选定的替代标签添加到当前选定的字符来修改标签。看下面。

/* * 取消确定*/function clickBtnS(){ var $ addLabelDivS=$(' # addLabel _ divS ')，input all=$(' # queryPageForm input[type=' checkbox ']')；//确定$('.addLabel _ divS _ div 1。BTN 1 ' .on('click '，function(){ var $length=$(').add label _ divS _ ul _ s . addLabel _ divS _ ul _ SlI’)；//备选标签ul /找到勾选的里添加当前勾选的标签人物列表用于(设I=0；输入长度；i ){ //判断当前人员列表是否被勾选勾选的添加标签if($(inputAll[i]).道具('选中'){ $(输入栏[i]).父代('。user _ list _ Li _ div _ 1’).兄弟姐妹('。user _ list _ Li _ div _ 2’).查找('。div 2 _ label _ ul’).empty()；//循环已选择的里为（设j=0；j美元长度j ){ if($($length[j]).查找('输入')。道具('选中'){//控制台。日志($($ length[j]).text())；var $ Li=' Li class=' div 2 _ lable _ Li ' ' $($ length[j]).text()'/Li '；$(输入栏[i]).父代('。user _ list _ Li _ div _ 1’).兄弟姐妹('。user _ list _ Li _ div _ 2’).查找('。div 2 _ label _ ul’).追加($李)；} } } };$('.添加标签_ DIvs _ ul _ s’).查找('里').移除();$('#addLabel_divS_wrp ').hide()；$ addlabeldivs。hide()；});//取消$('.addLabel _ divS _ div 1。BTN 2 ' .on('click '，function(){ $(').添加标签_ DIvs _ ul _ s’).查找('里').移除();$('#addLabel_divS_wrp ').hide()；$ addlabeldivs。hide()；});};至此就可以实现和微信的打标签相同的效果了。也没看微信的源码不知道人家这么写的。自知这个实现思路为循环有点多性能肯定不好（先实现功能在优化嘛。嘿嘿)。求指教哦。

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