当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 详解JavaScript添加给定的标签选项

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

2018年09月23日  | 移动技术网IT编程  | 我要评论

先看看效果图：

代码实现：

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中文网其它相关文章！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网