添加标签——给定标签选项
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 } GitHub：Fuck me on GitHub 留下你的足迹求推荐呦
