首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >添加标签——无给定标签选项

添加标签——无给定标签选项

作者头像
ProsperLee
发布2018-10-24 10:44:46
7010
发布2018-10-24 10:44:46
举报

HTML:

 1     <!-- input输入标签,请以英文逗号分开 -->
 2     <input type="text" placeholder="请以英文逗号分开" id="tagvalue" value="Prosper,Lee,无敌,的,存在" />
 3     
 4     <!-- 添加标签 -->
 5     <button id="addbtn">无标签选项的添加标签</button>
 6     
 7     <hr />
 8     
 9     <!-- 添加标签 -->
10     <div id="tags"></div>

CSS:

 1 #tags span {
 2     display: inline-block;
 3     padding: 0 0 0 10px;
 4     margin: 2px 5px;
 5     border: 1px solid #000;
 6 }
 7 
 8 #tags span::after {
 9     content: "x";
10     display: inline-block;
11     padding: 0 10px;
12     background-color: #00ffff;
13     margin-left: 5px;
14 }

JavaScript:

 1         var tagsStr = document.getElementById('tagvalue').value; // 含有英文逗号分割的字符串
 2 
 3         var arr; // 接受标签函数的返回值
 4 
 5         document.getElementById('addbtn').onclick = function() { arr = addTags(tagsStr, "tags") }; // 添加标签按钮
 6 
 7         /**
 8          * [添加删除标签]
 9          * @author ProsperLee
10          * @param {[string]} tagsStr   [含有英文逗号分割的字符串]
11          * @param {[string]} addTagsId [需要添加标签的HTML标签id]
12          * @return {[array]} [含有的标签数组,可用变量接收]
13          */
14         function addTags(tagsStr, addTagsId) {
15 
16             var tagsArr = tagsStr.split(","); // 以英文逗号分割标签
17 
18             document.getElementById(addTagsId).innerHTML = ""; // 初始化标签展示区域,避免每次点击都append
19 
20             for (var i = 0; i < tagsArr.length; i++) {
21 
22                 document.getElementById(addTagsId).innerHTML += "<span>" + tagsArr[i] + "</span>";
23 
24             }
25 
26             // 删除标签
27             var len = document.getElementById(addTagsId).children.length;
28 
29             for (var i = 0; i < len; i++) {
30 
31                 document.getElementById(addTagsId).children[i].onclick = function() {
32 
33                     this.remove(); // 删除当前标签
34 
35                     tagsArr.splice(tagsArr.indexOf(this.innerHTML), 1); // 从数组中删除该元素
36 
37                     return tagsArr; // 点击删除后的标签数组
38 
39                 };
40            
41             }
42 
43             return tagsArr; // 没有点击删除时的标签数组
44 
45         }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-08-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档