您现在的位置是：首页 > 文章详情

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

日期：2018-07-31点击：404收藏

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 }