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

HTML:

1     <h3>haveTags</h3>
2     <div id="havetags"></div>
3     <hr />
4     <h3>addTags</h3>
5     <div id="addtags"></div>
6     <button id="btn">返回的数组</button>

CSS:

 1 #havetags span,
 2 #addtags span {
 3     display: inline-block;
 4     padding: 0 0 0 10px;
 5     margin: 2px 5px;
 6     border: 1px solid #000;
 7 }
 8 
 9 #havetags span::after,
10 #addtags span::after {
11     content: "+";
12     display: inline-block;
13     padding: 0 10px;
14     background-color: #00ffff;
15     margin-left: 5px;
16 }
17 
18 #addtags span::after {
19     content: "x";
20 }

JavaScript:

  1     // 拥有的标签
  2     var haveArr = ["HTML", "CSS", "JavaScript", "jQuery", "Vue", "Bootstrap"];
  3 
  4     // 添加的标签
  5     var addArr = ["PHP", "MySQL"];
  6 
  7     /**
  8      * [tagsShow 展示拥有的标签]
  9      * @param  {[String]} haveTagsId [展示拥有标签的HTML标签Id]
 10      * @param  {[String]} addTagsId  [展示添加标签的HTML标签Id]
 11      * @param  {[Array]} haveTags   [拥有标签的数组]
 12      * @param  {[Array]} addTags    [添加标签的数组]
 13      */
 14     function tagsShow(haveTagsId, addTagsId, haveTags, addTags) {
 15 
 16         for (var i = 0; i < haveTags.length; i++) {
 17 
 18             document.getElementById(haveTagsId).innerHTML += "<span>" + haveTags[i] + "</span>";
 19 
 20         }
 21 
 22         addTag(haveTagsId, addTagsId, haveArr, addArr);
 23 
 24         for (var i = 0; i < addTags.length; i++) {
 25 
 26             document.getElementById(addTagsId).innerHTML += "<span>" + addTags[i] + "</span>";
 27 
 28         }
 29 
 30         delTag(haveTagsId, addTagsId, haveTags, addTags);
 31 
 32     }
 33 
 34     /**
 35      * 添加标签
 36      * @param  {[String]} haveTagsId [展示拥有标签的HTML标签Id]
 37      * @param  {[String]} addTagsId  [展示添加标签的HTML标签Id]
 38      * @param  {[Array]} haveTags   [拥有标签的数组]
 39      * @param  {[Array]} addTags    [添加标签的数组]
 40      */
 41     function addTag(haveTagsId, addTagsId, haveTags, addTags) {
 42 
 43         var len = document.getElementById(haveTagsId).children.length;
 44 
 45         for (var i = 0; i < len; i++) {
 46 
 47             document.getElementById(haveTagsId).children[i].onclick = function() {
 48 
 49                 this.remove();
 50 
 51                 addTags.push(this.innerHTML);
 52 
 53                 document.getElementById(addTagsId).innerHTML += "<span>" + this.innerHTML + "</span>";
 54 
 55                 haveTags.splice(haveTags.indexOf(this.innerHTML), 1); // 从数组中删除该元素
 56 
 57                 delTag(haveTagsId, addTagsId, haveTags, addTags);
 58             }
 59 
 60         }
 61 
 62     }
 63 
 64     /**
 65      * 删除标签
 66      * @param  {[String]} haveTagsId [展示拥有标签的HTML标签Id]
 67      * @param  {[String]} addTagsId  [展示添加标签的HTML标签Id]
 68      * @param  {[Array]} haveTags   [拥有标签的数组]
 69      * @param  {[Array]} addTags    [添加标签的数组]
 70      */
 71     function delTag(haveTagsId, addTagsId, haveTags, addTags) {
 72 
 73         var len = document.getElementById(addTagsId).children.length;
 74 
 75         for (var i = 0; i < len; i++) {
 76 
 77             document.getElementById(addTagsId).children[i].onclick = function() {
 78 
 79                 this.remove();
 80 
 81                 haveTags.push(this.innerHTML);
 82 
 83                 document.getElementById(haveTagsId).innerHTML += "<span>" + this.innerHTML + "</span>";
 84 
 85                 addTags.splice(addTags.indexOf(this.innerHTML), 1); // 从数组中删除该元素
 86 
 87                 addTag(haveTagsId, addTagsId, haveTags, addTags);
 88 
 89             }
 90 
 91         }
 92 
 93     }
 94 
 95     // 展示标签
 96     tagsShow('havetags', 'addtags', haveArr, addArr);
 97 
 98     // 最终数组
 99     document.getElementById("btn").onclick = function(){
100  
101         console.log(haveArr);
102  
103         console.log(addArr);
104  
105     }

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

根据标准word模板生成word文档类库(开源)

前言     最近因项目需要要自定义标准word模板,并以编码方式操作word模板、填充数据和生成word文档,于是自己写了条小“内裤”来实现这个功能。该“内...

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

jQuery 选取元素概要

注意: 对于 jQuery 自定义的选择器,为了性能,先用 CSS 定义的选择器选,再从结果集中筛选时用 jQuery 自定义的选择器。如:

8420
来自专栏静默虚空的博客

jQuery 选择器

基本选择器 基本选择器是最简单的选择器,可以通过元素id、class和标签名等来直接查找DOM元素。 元素选择器 根据给定元素名匹配元素。如下选择的是所有d...

22380
来自专栏逸鹏说道

jQuery选择器大全(48个代码片段+21幅图演示)1

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就...

36470
来自专栏WD学习记录

html学习笔记1

1.网页文档的结构和格式的定义是由HTML元素来完成的.HTML元素是由单个或一对标签定义的范围。一个标签就是左右分别有(<)(>)的字符串。开始标签是指不以/...

12130
来自专栏闻道于事

JavaScript事件与例子(三)

两个例子,好友选中效果和左侧右侧子菜单 一、好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,...

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

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

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

11530
来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

36440
来自专栏用户2442861的专栏

css display table-cell

display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

34310
来自专栏Golang语言社区

转--Go语言常用字符串处理方法实例汇总

package main import ( "fmt" "strings" //"unicode/utf8" ) func main()...

36370

扫码关注云+社区

领取腾讯云代金券