今天，我们刚刚完成一个小功能：微信公众平台的标签，带注释，欢迎纠正错误：

操作介绍：选择字符列表并单击标签按钮为选定的字符添加新标签。

分析的实现思想是：

1。点击标签知道这些字符被选中-遍历当前字符列表。

2。在获取选定字符的列表之后，您必须知道以下标签有哪些以便遍历字符标签列表。

三.获取当前标签的列表，或遍历

有很多废话。几张图片加布里埃。

1。在加载开始时，标记不是可选的。

2。当选择任务列表时，您可以单击标签并显示可编辑标记列表（内容列表来自右侧）。

三.选择标签以确定当前选定的字符标记的变化；


过程就是这样，代码：

基本页面结构：


HTML和CSS将不能写。以下是主要的JS代码：


功能addlabel（）{

$（'。addlabel_divs_ul_s）。找到（李的）删除（）；
$（# addlable_btn）。Css（{ 'cursor：'pointer、背景：# FFF}）；

$（# addlable_btn '），（听到咔哒声，函数（））{
要隐藏UL（也就是在添加LI中的POP / UL）
VaR的LIS =美元美元（'。ullabels >。lable_list_li_append_li >。lable_list_li_strong_2），
addlabeldivsuls = $（美元。addlabel_divs_ul_s），
inputall = $（美元复选框的# querypageform输入{类型=），
为用户输入长度= $ inputall.length； / /字符列表

循环到替代UL的列表
为了（让我= 0；我的<< lis.length美元；i++）{
var$；
防止多个添加函数执行多个
如果（$ addlabeldivsuls.find（李的长度）！= $ LIS长度）{
/ / console.log（'zhixing）；
addlabeldivsuls.append美元（合礼）；
}；
}

循环检查了标签中的字符列表，显著地指向了替代的UL（李在输入的滴答声中）。
为了（让我= 0；i < $用户输入长度；i++）{

确定当前的工作人员列表是标签选择复选钩子。
如果（$（$ inputall {我}）。道具（'checked '））{
$长度：字符固有标签的长度
这条思路想= $（var $美元inputall {我}）。母（'。user_list_li_div_1）。兄弟姐妹（'。user_list_li_div_2）。找到（'。div2_lable_ul >里的）；
长度=美元美元thisli.length； / /替代标签UL

对于（让j = 0；j < $长度；j + +）{
/ / console.log（$（$这条思路想{ J }）。文本（））；
为了（让K = 0；K＜addlabeldivsuls.find美元（李的）。长度；K +）{

如果（$（$这条思路想{，}）（文本）（$ addlabeldivsuls.find = $（李）{ k }）（文本））{

$（$ addlabeldivsuls.find（李）{ k }）。找到（输入的），道具（'checked '，真的）
}
}
}
}
}；

$（# addlabel_divs_wrp）显示（）；
$（# addlabel_divs）显示（）；
}）；
}





以上是获得其他的标签和找到所选字符标记列表，检查替代的标签，当我们需要知道当前窗口的字符，选中列表后，我们选择了另类标签添加到当前选定的字符，在修改标签.....看底部功能的实现。


*
*取消决定
* /
功能clickbtns（）{
addlabeldivs = $（var $ ' # addlabel_divs），
inputall = $（复选框的# querypageform输入{类型=）；


/肯定
$（'。addlabel_divs_div1 >。BTN1 '），（听到咔哒声，函数（））{

VaR的长度=（美元美元。addlabel_divs_ul_s >。addlabel_divs_ul_sli '）； / /替代标签UL

查找/检查李，添加当前选定的字符标签列表
为了（让我= 0；i < inputall.length；i++）{

确定当前的工作人员列表是标签选择复选钩子。
如果（$（inputall {我}）。道具（'checked '））{
$（inputall {我}）。母（'。user_list_li_div_1）。兄弟姐妹（'。user_list_li_div_2）。找到（'。div2_lable_ul）空（）；
选定的李/ 循环
为了（让j = 0；J < length.length美元；j++）{
如果（$（$长度{ J }）。找到（输入的），道具（'checked '））{
/ / console.log（$（$长度{ J }）。文本（））；
var$；

$（inputall {我}）。母（'。user_list_li_div_1）。兄弟姐妹（'。user_list_li_div_2）。找到（'。div2_lable_ul）。追加（合理）；
}
}
}
}；

$（'。addlabel_divs_ul_s）。找到（李的）删除（）；
$（# addlabel_divs_wrp）隐藏（）；
addlabeldivs.hide美元（）；
}）；

/取消
$（'。addlabel_divs_div1 >。BTN2 '），（听到咔哒声，函数（））{
$（'。addlabel_divs_ul_s）。找到（李的）删除（）；
$（# addlabel_divs_wrp）隐藏（）；
addlabeldivs.hide美元（）；
}）；
}；



在这一点上，我们可以实现微信标签相同的效果。我没有看到微信的来源，我不知道这是写的。我们知道周期实现这个想法是不好的（首先要在优化。实现的功能嘿嘿）。请示。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。