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

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         }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java达人

jquery常用选择器

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用...

22160
来自专栏SpringBoot

Jquery入门

jquery [] jquery概念 jquery是JS的框架。 JS的函数库。 【】BOM BOM:Br...

16020
来自专栏前端知识分享

第70天:jQuery基本选择器(一)

jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发

8510
来自专栏九彩拼盘的叨叨叨

图片占位服务 Placeholder 写法示例

在做页面时,页面上的一些图片需要找临时图片来占位。Placeholder 提供好用的占位图服务。

12530
来自专栏柠檬先生

VUE 入门基础(2)

二,起步 引用方式可以使用  vue-cli     <script src="https://unpkg.com/vue/dist/vue.js"></scr...

23370
来自专栏程序员的知识天地

H5学习从0到1-H5列表(8)

1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心圆)square (方块)

11430
来自专栏小古哥的博客园

JavaScript事件对象与事件的委托

事件对象 包含事件相关的信息,如鼠标、时间、触发的DOM对象等  js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: doc...

34350
来自专栏个人随笔

初识CSS3

1.CSS规则由两部分构成,即选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值用冒号分开,每条语句...

34380
来自专栏十月梦想

Vue动画之列表过渡

        首先我们定义一个列表循环的元素放在transition-group中

30920
来自专栏weixuqin 的专栏

Scrapy选择器的用法

370120

扫码关注云+社区

领取腾讯云代金券