欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解JavaScript添加给定的标签选项

程序员文章站 2022-07-04 17:42:03
先看看效果图: 代码实现: html代码:

havetags

先看看效果图:

详解JavaScript添加给定的标签选项

代码实现:

html代码:

<h3>havetags</h3>
<div id="havetags"></div>
<hr />
<h3>addtags</h3>
<div id="addtags"></div>
<button id="btn">返回的数组</button>

css代码:

#havetags span,
#addtags span {
 display: inline-block;
 padding: 0 0 0 10px;
 margin: 2px 5px;
 border: 1px solid #000;
}
 
#havetags span::after,
#addtags span::after {
 content: "+";
 display: inline-block;
 padding: 0 10px;
 background-color: #00ffff;
 margin-left: 5px;
}
 
#addtags span::after {
 content: "x";
}

js代码:

// 拥有的标签
var havearr = ["html", "css", "javascript", "jquery", "vue", "bootstrap"];
 
// 添加的标签
var addarr = ["php", "mysql"];
 
/**
 * [tagsshow 展示拥有的标签]
 * @param {[string]} havetagsid [展示拥有标签的html标签id]
 * @param {[string]} addtagsid [展示添加标签的html标签id]
 * @param {[array]} havetags [拥有标签的数组]
 * @param {[array]} addtags [添加标签的数组]
 */
function tagsshow(havetagsid, addtagsid, havetags, addtags) {
 
 for(var i = 0; i < havetags.length; i++) {
 
  document.getelementbyid(havetagsid).innerhtml += "<span>" + havetags[i] + "</span>";
 
 }
 
 addtag(havetagsid, addtagsid, havearr, addarr);
 
 for(var i = 0; i < addtags.length; i++) {
 
  document.getelementbyid(addtagsid).innerhtml += "<span>" + addtags[i] + "</span>";
 
 }
 
 deltag(havetagsid, addtagsid, havetags, addtags);
 
}
 
/**
 * 添加标签
 * @param {[string]} havetagsid [展示拥有标签的html标签id]
 * @param {[string]} addtagsid [展示添加标签的html标签id]
 * @param {[array]} havetags [拥有标签的数组]
 * @param {[array]} addtags [添加标签的数组]
 */
function addtag(havetagsid, addtagsid, havetags, addtags) {
 
 var len = document.getelementbyid(havetagsid).children.length;
 
 for(var i = 0; i < len; i++) {
 
  document.getelementbyid(havetagsid).children[i].onclick = function() {
 
   this.remove();
 
   addtags.push(this.innerhtml);
 
   document.getelementbyid(addtagsid).innerhtml += "<span>" + this.innerhtml + "</span>";
 
   havetags.splice(havetags.indexof(this.innerhtml), 1); // 从数组中删除该元素
 
   deltag(havetagsid, addtagsid, havetags, addtags);
  }
 
 }
 
}
 
/**
 * 删除标签
 * @param {[string]} havetagsid [展示拥有标签的html标签id]
 * @param {[string]} addtagsid [展示添加标签的html标签id]
 * @param {[array]} havetags [拥有标签的数组]
 * @param {[array]} addtags [添加标签的数组]
 */
function deltag(havetagsid, addtagsid, havetags, addtags) {
 
 var len = document.getelementbyid(addtagsid).children.length;
 
 for(var i = 0; i < len; i++) {
 
  document.getelementbyid(addtagsid).children[i].onclick = function() {
 
   this.remove();
 
   havetags.push(this.innerhtml);
 
   document.getelementbyid(havetagsid).innerhtml += "<span>" + this.innerhtml + "</span>";
 
   addtags.splice(addtags.indexof(this.innerhtml), 1); // 从数组中删除该元素
 
   addtag(havetagsid, addtagsid, havetags, addtags);
 
  }
 
 }
 
}
 
// 展示标签
tagsshow('havetags', 'addtags', havearr, addarr);
 
// 最终数组
document.getelementbyid("btn").onclick = function() {
 
 console.log(havearr);
 
 console.log(addarr);
 
}

以上就是javascript如何实现添加给定的标签选项?(代码实例)的详细内容,更多请关注php中文网其它相关文章!